Detecting data changes in forms using jQuery

Question

I\'m using ASP.NET 2.0 with a Master Page, and I was wondering if anyone knew of a way to detect when the fields within a certain

or fieldset<

相关标签:

Answer 1

You can give the fieldset or div an ID and bind the change event to it ... the event should propagate from the inner children.

var somethingChanged = false;
$('#fieldset_id').change(function(e)
{
    // e.target is the element which triggered the event
    // console.log(e.target);
    somethingChanged = true;
});

Additionally if you wanted to have a single event listening function you could put the change event on the form and then check which fieldset changed:

$('#form_id').change(function(e)
{
    var changedFieldset = $(e.target).parents('fieldset');
    // do stuff
});

Answer 2

The following solution worked for me:

$("#myDiv :input").change(function() { $("#myDiv").data("changed",true);});
}
  
if($("#myDiv").data("changed")) {
console.log('Form data changed hence proceed to submit');  
}
else {
console.log('No change detected!');
}

Thanks

Answer 3

An alternative to Dw7's answer if you only want the fields inside a fieldset then you can call serialize() on its input values. Note: serialize() will not pickup any elements that do not have a "name" attribute. This will work for select tags as well.

var initialValues = $('#your-fieldset :input').serialize();

$('form').submit(function(e) {
  e.preventDefault();
  var currentValues = $('#your-fieldset :input').serialize();
  if (currentValues == initialValues) {
    // Nothing has changed
    alert('Nothing was changed');
  }
  else {
    this.submit();
  }
});

Answer 4

You could bind the Change event for all inputs and flag a variable as true. Like this.

var somethingChanged = false;
$(document).ready(function() { 
   $('input').change(function() { 
        somethingChanged = true; 
   }); 
});

But, keep in mind that if the user changes something, then changes back to the original values, it will still be flagged as changed.

UPDATE: For a specific div or fieldset. Just use the id for the given fieldset or div. Example:

var somethingChanged = false;
$(document).ready(function() { 
   $('#myDiv input').change(function() { 
        somethingChanged = true; 
   }); 
});

Answer 5

Quick (but very dirty) solution

This is quick, but it won't take care of ctrl+z or cmd+z and it will give you a false positive when pressing shift, ctrl or the tab key:

$('#my-form').on('change keyup paste', ':input', function(e) {
    // The form has been changed. Your code here.
});

Test it with this fiddle.

---

Quick (less dirty) solution

This will prevent false positives for shift, ctrl or the tab key, but it won't handle ctrl+z or cmd+z:

$('#my-form').on('change keyup paste', ':input', function(e) {

  var keycode = e.which;

  if (e.type === 'paste' || e.type === 'change' || (
      (keycode === 46 || keycode === 8) || // delete & backspace
      (keycode > 47 && keycode < 58) || // number keys
      keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
      (keycode > 64 && keycode < 91) || // letter keys
      (keycode > 95 && keycode < 112) || // numpad keys
      (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
      (keycode > 218 && keycode < 223))) { // [\]' (in order))

    // The form has been changed. Your code here.

  }

});

Test it with this fiddle.

---

A complete solution

If you want to handle all the cases, you should use:

// init the form when the document is ready or when the form is populated after an ajax call
$(document).ready(function() {
  $('#my-form').find(':input').each(function(index, value) {
    $(this).data('val', $(this).val());
  });
})

$('#my-form').on('change paste', ':input', function(e) {
  $(this).data('val', $(this).val());
  // The form has been changed. Your code here.
});

$('#my-form').on('keyup', ':input', function(e) {
  if ($(this).val() != $(this).data('val')) {
    $(this).data('val', $(this).val());
    // The form has been changed. Your code here. 
  }
});

Test it with this fiddle.

Answer 6

For a form you could serialize the contents on load then compare serialization at a later time, e.g.:

$(function(){
    var initdata=$('form').serialize();
    $('form').submit(function(e){
        e.preventDefault();
        var nowdata=$('form').serialize();
        if(initdata==nowdata) console.log('nothing changed'); else console.log('something changed');
        // save
        initdata=nowdata;
        $.post('settings.php',nowdata).done(function(){
            console.log('saved');
        });
    });
});

Note this requires form elements to have a name attribute.