[javascript] How do you handle a form change in jQuery?

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

EDIT: I should have added that I only need to check on a click() event.

EDIT: Sorry I really should have been more specific! Say I have a form and I have a button with the following:

$('#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?

Here is an elegant solution.

There is hidden property for each input element on the form that you can use to determine whether or not the value was changed. Each type of input has it's own property name. For example

• for text/textarea it's defaultValue
• for select it's defaultSelect
• for checkbox/radio it's defaultChecked

Here is the example.

function bindFormChange($form) {

  function touchButtons() {
    var
      changed_objects = [],
      $observable_buttons = $form.find('input[type="submit"], button[type="submit"], button[data-object="reset-form"]');

    changed_objects = $('input:text, input:checkbox, input:radio, textarea, select', $form).map(function () {
      var
        $input = $(this),
        changed = false;

      if ($input.is('input:text') || $input.is('textarea') ) {
        changed = (($input).prop('defaultValue') != $input.val());
      }
      if (!changed && $input.is('select') ) {
        changed = !$('option:selected', $input).prop('defaultSelected');
      }
      if (!changed && $input.is('input:checkbox') || $input.is('input:radio') ) {
        changed = (($input).prop('defaultChecked') != $input.is(':checked'));
      }
      if (changed) {
        return $input.attr('id');
      }

    }).toArray();

    if (changed_objects.length) {
      $observable_buttons.removeAttr('disabled')   
    } else {
      $observable_buttons.attr('disabled', 'disabled');
    }
  };
  touchButtons();

  $('input, textarea, select', $form).each(function () {
    var $input = $(this);

    $input.on('keyup change', function () {
      touchButtons();
    });
  });

};

Now just loop thru the forms on the page and you should see submit buttons disabled by default and they will be activated ONLY if you indeed will change some input value on the form.

$('form').each(function () {
    bindFormChange($(this));
});

Implementation as a jQuery plugin is here https://github.com/kulbida/jmodifiable

You can use multiple selectors to attach a callback to the change event for any form element.

$("input, select").change(function(){
    // Something changed
});

EDIT

Since you mentioned you only need this for a click, you can simply modify my original code to this:

$("input, select").click(function(){
    // A form element was clicked
});

EDIT #2

Ok, you can set a global that is set once something has been changed like this:

var FORM_HAS_CHANGED = false;

$('#mybutton').click(function() {
    if (FORM_HAS_CHANGED) {
        // The form has changed
    }
});

$("input, select").change(function(){
    FORM_HAS_CHANGED = true;
});

var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
   var newformStr = JSON.stringify($("#form").serializeArray());
   if (formStr != newformStr){
      ...
         formChangedfunct();
      ...
   }
   else {
      ...
         formUnchangedfunct();
      ...
   }
}

A real time and simple solution:

$('form').on('keyup change paste', 'input, select, textarea', function(){
    console.log('Form changed!');
});

First, I'd add a hidden input to your form to track the state of the form. Then, I'd use this jQuery snippet to set the value of the hidden input when something on the form changes:

    $("form")
    .find("input")
    .change(function(){
        if ($("#hdnFormChanged").val() == "no")
        {
            $("#hdnFormChanged").val("yes");
        }
    });

When your button is clicked, you can check the state of your hidden input:

$("#Button").click(function(){
    if($("#hdnFormChanged").val() == "yes")
    {
        // handler code here...
    }
});

Extending Udi's answer, this only checks on form submission, not on every input change.

$(document).ready( function () {
  var form_data = $('#myform').serialize();
  $('#myform').submit(function () {
      if ( form_data == $(this).serialize() ) {
        alert('no change');
      } else {
        alert('change');
      }
   });
});

Looking at the updated question try something like

$('input, textarea, select').each(function(){
    $(this).data("val", $(this).val());
});
$('#button').click(function() {
    $('input, textarea, select').each(function(){
        if($(this).data("val")!==$(this).val()) alert("Things Changed");
    });
});

For the original question use something like

$('input').change(function() {
    alert("Things have changed!");
});

$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {_x000D_
  $("#result").html($(this).val());_x000D_
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<h2>Form "your_form_name"</h2>_x000D_
<form name="your_form_name">_x000D_
  <input type="text" name="one_a" id="one_a" value="AAAAAAAA" />_x000D_
  <input type="text" name="one_b" id="one_b" value="BBBBBBBB" />_x000D_
  <input type="text" name="one_c" id="one_c" value="CCCCCCCC" />_x000D_
  <select name="one_d">_x000D_
    <option value="111111">111111</option>_x000D_
    <option value="222222">222222</option>_x000D_
    <option value="333333">333333</option>_x000D_
  </select>_x000D_
</form>_x000D_
<hr/>_x000D_
<h2>Form "your_other_form_name"</h2>_x000D_
<form name="your_other_form_name">_x000D_
  <input type="text" name="two_a" id="two_a" value="DDDDDDDD" />_x000D_
  <input type="text" name="two_b" id="two_b" value="EEEEEEEE" />_x000D_
  <input type="text" name="two_c" id="two_c" value="FFFFFFFF" />_x000D_
  <input type="text" name="two_d" id="two_d" value="GGGGGGGG" />_x000D_
  <input type="text" name="two_e" id="two_f" value="HHHHHHHH" />_x000D_
  <input type="text" name="two_f" id="two_e" value="IIIIIIII" />_x000D_
  <select name="two_g">_x000D_
    <option value="444444">444444</option>_x000D_
    <option value="555555">555555</option>_x000D_
    <option value="666666">666666</option>_x000D_
  </select>_x000D_
</form>_x000D_
<h2>Result</h2>_x000D_
<div id="result">_x000D_
  <h2>Click on a field..</h2>_x000D_
</div>

In addition to above @JoeD's answer.

If you want to target fields in a particular form (assuming there are more than one forms) than just fields, you can use the following code:

$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
    // A form element was clicked
});

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

});

Try this:

<script>
var form_original_data = $("form").serialize(); 
var form_submit=false;
$('[type="submit"]').click(function() {
    form_submit=true;
});
window.onbeforeunload = function() {
    //console.log($("form").submit());
    if ($("form").serialize() != form_original_data && form_submit==false) {
        return "Do you really want to leave without saving?";
    }
};
</script>

You need jQuery Form Observe plugin. That's what you are looking for.

$('form :input').change(function() {
    // Something has changed
});