Wie gehen Sie mit einer Formularänderung in jQuery um?

Gibt es in jQuery eine einfache Möglichkeit zu testen, ob sich eines der Elemente eines Formulars geändert hat?

EDIT: Ich hätte hinzufügen sollen, dass ich nur ein click()Ereignis überprüfen muss .

EDIT: Sorry, ich hätte wirklich genauer sein sollen! Angenommen, ich habe ein Formular und eine Schaltfläche mit den folgenden Angaben:

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

Wie würde ich testen, ob sich das Formular seit dem Laden geändert hat?

Du kannst das:

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

Diese Rigs eines changeEvent - Handler - Eingänge in Form, wenn einer von ihnen es ändern verwendet .data()einen einstellen changedWert true, dann überprüfen wir nur für diesen Wert auf dem Klick, das davon ausgeht , dass im #mybuttonInnern der Form (wenn nicht nur ersetzen $(this).closest('form')mit $('#myForm')), aber Sie könnten es noch allgemeiner machen, wie folgt:

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

Referenzen: Aktualisiert

Laut jQuery ist dies ein Filter zur Auswahl aller Formularsteuerelemente.

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

Der Eingangswähler: wählt grundsätzlich alle Formularsteuerelemente aus.

Wenn Sie überprüfen möchten, ob sich die Formulardaten, die an den Server gesendet werden sollen, geändert haben, können Sie die Formulardaten beim Laden der Seite serialisieren und mit den aktuellen Formulardaten vergleichen:

$(function() {

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

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

});

Eine Echtzeit- und einfache Lösung:

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

Sie können mehrere Selektoren verwenden, um dem Änderungsereignis für jedes Formularelement einen Rückruf beizufügen.

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

BEARBEITEN

Da Sie erwähnt haben, dass Sie dies nur für einen Klick benötigen, können Sie meinen ursprünglichen Code einfach so ändern:

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

EDIT # 2

Ok, Sie können ein Global festlegen, das festgelegt wird, sobald etwas wie folgt geändert wurde:

var FORM_HAS_CHANGED = false;

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

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

Wenn Sie sich die aktualisierte Frage ansehen, versuchen Sie etwas wie

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

Verwenden Sie für die ursprüngliche Frage so etwas wie

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

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

Hier ist eine elegante Lösung.

Für jedes Eingabeelement im Formular gibt es eine versteckte Eigenschaft, mit der Sie bestimmen können, ob der Wert geändert wurde oder nicht. Jeder Eingabetyp hat einen eigenen Eigenschaftsnamen. Beispielsweise

• für text/textareaes ist defaultValue
• für selectes ist defaultSelect
• denn checkbox/radioes ist defaultChecked

Hier ist das Beispiel.

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

};

Durchlaufen Sie jetzt einfach die Formulare auf der Seite und Sie sollten sehen, dass die Senden-Schaltflächen standardmäßig deaktiviert sind. Sie werden NUR aktiviert, wenn Sie tatsächlich einen Eingabewert im Formular ändern.

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

Die Implementierung als jQueryPlugin finden Sie hier https://github.com/kulbida/jmodifying

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

Sie benötigen das Plugin jQuery Form Observe . Das ist was Sie suchen.

Wenn Sie die Antwort von Udi erweitern, wird nur die Formularübermittlung überprüft, nicht jede Eingabeänderung.

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

Zuerst würde ich Ihrem Formular eine versteckte Eingabe hinzufügen, um den Status des Formulars zu verfolgen. Dann würde ich dieses jQuery-Snippet verwenden, um den Wert der versteckten Eingabe festzulegen, wenn sich etwas im Formular ändert:

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

Wenn Sie auf Ihre Schaltfläche klicken, können Sie den Status Ihrer versteckten Eingabe überprüfen:

$("#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>

Zusätzlich zu der obigen Antwort von @ JoeD.

Wenn Sie Felder in einem bestimmten Formular (vorausgesetzt, es gibt mehr als ein Formular) als nur Felder als Ziel festlegen möchten, können Sie den folgenden Code verwenden:

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

Versuche dies:

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