Comment gérer un changement de formulaire en jQuery ?

Question

Dans jQuery, existe-t-il un moyen simple de tester si cualquier des éléments d'un formulaire ont changé ?

Disons que j'ai un formulaire et que j'ai un bouton avec le texte suivant click() événement :

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

Comment puis-je tester si le formulaire a été modifié depuis son chargement ?

Answer 1

Vous pouvez le faire :

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

Cela permet d'installer un change pour les entrées du formulaire, si l'une d'entre elles change, il utilise la fonction .data() pour définir un changed à la valeur true alors nous vérifions simplement cette valeur au moment du clic, ce qui suppose que #mybutton est à l'intérieur du formulaire (sinon, il suffit de remplacer $(this).closest('form') con $('#myForm') ), mais vous pourriez le rendre encore plus générique, comme ceci :

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

Références : Mise à jour de

Selon jQuery, il s'agit d'un filtre permettant de sélectionner tous les contrôles de formulaire.

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

Le sélecteur :input sélectionne essentiellement tous les contrôles de formulaire.

Answer 2

Si vous voulez vérifier si les données du formulaire, telles qu'elles vont être envoyées au serveur, ont changé, vous pouvez sérialiser les données du formulaire au chargement de la page et les comparer aux données actuelles du formulaire :

$(function() {

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

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

});

Answer 3

Une solution simple et rapide :

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

Answer 4

Vous pouvez utiliser plusieurs sélecteurs pour joindre une fonction de rappel à l'événement de modification de tout élément de formulaire.

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

EDIT

Puisque vous avez mentionné que vous n'en avez besoin que pour un clic, vous pouvez simplement modifier mon code original comme suit :

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

EDIT #2

Ok, vous pouvez définir un global qui est défini une fois que quelque chose a été modifié comme ceci :

var FORM_HAS_CHANGED = false;

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

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

Answer 5

En regardant la question mise à jour, essayez quelque chose comme

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

Pour la question originale, utilisez quelque chose comme

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