¿Cómo se maneja un cambio de formulario en jQuery?

En jQuery, ¿hay una forma sencilla de probar si ALGUNO de los elementos de un formulario ha cambiado?

EDITAR: Debería haber agregado que solo necesito verificar un click()evento.

EDITAR: ¡ Lo siento, debería haber sido más específico! Digamos que tengo un formulario y tengo un botón con lo siguiente:

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

¿Cómo probaría si el formulario ha cambiado desde que se cargó?

Puedes hacerlo:

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

Esto adapta un changecontrolador de eventos a las entradas en el formulario, si alguno de ellos cambia lo que usa .data()para establecer un changedvalor true, entonces simplemente verificamos ese valor en el clic, esto supone que #mybuttonestá dentro del formulario (si no solo lo reemplaza $(this).closest('form')con $('#myForm')), pero podrías hacerlo aún más genérico, así:

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

Referencias: actualizado

Según jQuery, este es un filtro para seleccionar todos los controles de formulario.

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

El selector de entrada: básicamente selecciona todos los controles de formulario.

Si desea verificar si los datos del formulario, ya que se enviarán al servidor, han cambiado, puede serializar los datos del formulario al cargar la página y compararlos con los datos del formulario actual:

$(function() {

    var form_original_data = $("#myform").serialize(); 

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

});

Una solución simple y en tiempo real:

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

Puede utilizar varios selectores para adjuntar una devolución de llamada al evento de cambio para cualquier elemento de formulario.

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

EDITAR

Como mencionó que solo necesita esto para un clic, simplemente puede modificar mi código original a esto:

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

EDITAR # 2

Ok, puede establecer un global que se establece una vez que se ha cambiado algo así:

var FORM_HAS_CHANGED = false;

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

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

Mirando la pregunta actualizada, intente algo como

$('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");
    });
});

Para la pregunta original, use algo como

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

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

Aquí tienes una elegante solución.

Existe una propiedad oculta para cada elemento de entrada en el formulario que puede usar para determinar si se cambió o no el valor. Cada tipo de entrada tiene su propio nombre de propiedad. Por ejemplo

• porque text/textareaes defaultValue
• porque selectes predeterminadoSelect
• porque checkbox/radioes predeterminado

Aquí está el ejemplo.

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

};

Ahora simplemente recorra los formularios en la página y debería ver los botones de envío deshabilitados por defecto y se activarán SOLAMENTE si realmente cambia algún valor de entrada en el formulario.

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

La implementación como jQuerycomplemento está aquí https://github.com/kulbida/jmodifiable

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

Necesita el complemento jQuery Form Observe . Eso es lo que buscas.

Extendiendo la respuesta de Udi, esto solo verifica el envío del formulario, no cada cambio de entrada.

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

Primero, agregaría una entrada oculta a su formulario para rastrear el estado del formulario. Luego, usaría este fragmento de jQuery para establecer el valor de la entrada oculta cuando algo en el formulario cambia:

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

Cuando se hace clic en su botón, puede verificar el estado de su entrada oculta:

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

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

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

Además de la respuesta anterior de @ JoeD.

Si desea apuntar a campos en un formulario en particular (asumiendo que hay más de un formulario) que solo campos, puede usar el siguiente código:

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

Prueba esto:

<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>