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 <div> or fieldset have been changed (e.g., marked 'IsDirty')?

Answer 1

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 2

Just to clarify because the question is "within a certain fieldset/div":

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

or

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

Answer 3

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
});