Moyen générique de détecter si un formulaire html est édité

Question

J'ai un formulaire html à onglets. Lorsque l'on passe d'un onglet à l'autre, les données de l'onglet en cours sont conservées (dans la base de données) même si elles ne sont pas modifiées.

Je voudrais que l'appel de persistance ne soit effectué que si le formulaire est modifié. Le formulaire peut contenir n'importe quel type de contrôle. L'édition du formulaire ne doit pas nécessairement se faire en tapant du texte, mais en choisissant une date dans un contrôle de calendrier.

Une façon d'y parvenir serait d'afficher le formulaire en mode lecture seule par défaut et de disposer d'un bouton "Modifier". Si l'utilisateur clique sur ce bouton, l'appel à la base de données est effectué (une fois de plus, indépendamment de la modification des données). C'est une meilleure amélioration par rapport à ce qui existe actuellement).

J'aimerais savoir comment écrire une fonction javascript générique qui vérifierait si l'une des valeurs des contrôles a été modifiée ?

Answer 1

En javascript pur, ce ne serait pas une tâche facile, mais jQuery la rend très facile à réaliser :

$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});

Ensuite, avant de sauvegarder, vous pouvez vérifier s'il a été modifié :

if ($("#myform").data("changed")) {
   // submit the form
}

Dans l'exemple ci-dessus, le formulaire a un id égal à "myform".

Si vous en avez besoin sous plusieurs formes, vous pouvez facilement en faire un plugin :

$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});

Alors vous pouvez simplement dire :

$("#myform").trackChanges();

et vérifier si un formulaire a été modifié :

if ($("#myform").isChanged()) {
   // ...
}

Answer 2

Je ne suis pas sûr d'avoir bien compris votre question, mais qu'en est-il de addEventListener ? Si vous ne vous souciez pas trop de la prise en charge d'IE8, cela devrait aller. Le code suivant fonctionne pour moi :

var form = document.getElementById("myForm");

form.addEventListener("input", function () {
    console.log("Form has changed!");
});

Answer 3

Au cas où JQuery ne serait pas envisageable. Une recherche rapide sur Google a permis de trouver des implémentations Javascript des algorithmes de hachage MD5 et SHA1. Si vous le souhaitez, vous pouvez concaténer toutes les entrées de formulaire et les hacher, puis stocker cette valeur en mémoire. Lorsque l'utilisateur a terminé. Concaténer toutes les valeurs et les hacher à nouveau. Comparez les 2 hachages. S'ils sont identiques, l'utilisateur n'a modifié aucun champ du formulaire. S'ils sont différents, quelque chose a été modifié, et vous devez appeler votre code de persistance.

Answer 4

Une autre façon d'y parvenir est de sérialiser le formulaire :

$(function() {
    var $form = $('form');
    var initialState = $form.serialize();

    $form.submit(function (e) {
      if (initialState === $form.serialize()) {
        console.log('Form is unchanged!');
      } else {
        console.log('Form has changed!');
      }
      e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Field 1: <input type="text" name="field_1" value="My value 1"> <br>
Field 2: <input type="text" name="field_2" value="My value 2"> <br>
Check: <input type="checkbox" name="field_3" value="1"><br>
<input type="submit">
</form>

Answer 5

Les modifications de formulaire peuvent facilement être détectées en JavaScript natif sans jQuery :

function initChangeDetection(form) {
  Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
  return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}

initChangeDetection() peut être appelé plusieurs fois tout au long du cycle de vie de votre page : Voir le test sur JSBin

---

Pour les anciens navigateurs qui ne prennent pas en charge les nouvelles fonctions de flèches et de tableaux :

function initChangeDetection(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    el.dataset.origValue = el.value;
  }
}
function formHasChanges(form) {
  for (var i=0; i<form.length; i++) {
    var el = form[i];
    if ('origValue' in el.dataset && el.dataset.origValue !== el.value) {
      return true;
    }
  }
  return false;
}