How do you handle a form change in jQuery?

Question

In jQuery, is there a simple way to test if any of a form's elements have changed?

Say I have a form and I have a button with the following click() event:

$('#mybutton').click(function() {   // Here is where is need to test   if(/* FORM has changed */) {      // Do something   } }); 

How would I test if the form has changed since it was loaded?

Answer 1

You can do this:

$("form :input").change(function() {   $(this).closest('form').data('changed', true); }); $('#mybutton').click(function() {   if($(this).closest('form').data('changed')) {      //do something   } }); 

This rigs a change event handler to inputs in the form, if any of them change it uses .data() to set a changed value to true, then we just check for that value on the click, this assumes that #mybutton is inside the form (if not just replace $(this).closest('form') with $('#myForm')), but you could make it even more generic, like this:

$('.checkChangedbutton').click(function() {   if($(this).closest('form').data('changed')) {      //do something   } }); 

References: Updated

According to jQuery this is a filter to select all form controls.

http://api.jquery.com/input-selector/

The :input selector basically selects all form controls.

Answer 2

If you want to check if the form data, as it is going to be sent to the server, have changed, you can serialize the form data on page load and compare it to the current form data:

$(function() {      var form_original_data = $("#myform").serialize();       $("#mybutton").click(function() {         if ($("#myform").serialize() != form_original_data) {             // Something changed         }     });  });