Compare text input's value against default value

Question

For a text input defined as:

<input type="text" name="Email0" id="Email0" value="1st Email" /><br />

If the user changes the value of that text box I simply pass it along with the form submit...if they _haven't changed it - i need to pass a value of 'null'.

$('#frmSignup').submit(function () {
    if (Email0.value != Email0.defaultValue) {
        alert("hit here"); //not hitting here
    }
});

You'll note that jQuery exists but i'm unclear as to exactly how to retrieve a input's defaultValue to jQuery.

thx

Answer 1

You can reference the underlying DOM element from a jQuery object using array syntax...

$("#frmSignup").submit(function () { 
    var email = $("#Email0")[0]; // gets DOM element

    if(email.value != email.defaultValue) { 
      alert("hit here");
    } 
}); 

Answer 2

There are several possibilities:

1. If you can change the layout of the html, change your input like this:

   <input type="text" name="Email0" id="Email0" value="1st Email" data-default="1st Email"/>
   

   then you can check for changes like this:

   $('#frmSignup').submit(function){
     $form = $(this).closest('form');
     $email = $('input[name=Email0]', $form);
     if ($email.val() != $email.attr('data-default')) {
       // value has changed
     }
   });
   

2. If you want a pure javascript solution, the following code will store the default value, before you change it:

   $(function(){ // short version of $(document).ready(callback);
     $email = $('#frmSignup input[name=Email0]');
     $email.data('default',$email.val());
   });
   

   Now you can look for changes like this:

   $('#frmSignup').submit(function){
     $form = $(this).closest('form');
     $email = $('input[name=Email0]', $form);
     if ($email.val() != $email.data('default')) {
       // value has changed
     }
   });