jQuery Girl
  1. jQuery Girl
  3. Comment puis-je savoir qu’une entrée de forme a changé?
Intereting Posts
glisser déposer et changer le parent d’une div en dom Comment charger une page externe en utilisant ajax Asp net grid view sélectionnez row à l’aide de jquery json.parse donne à Uncaught SyntaxError: un jeton inattendu (le jeu de requêtes sérialisé Django json) Est-ce une mauvaise forme d’utiliser des atsortingbuts CLASS sans règle CSS correspondante? appel ajax avant de changer de page? passer un tableau à json.ssortingngify fonction de rappel de délai d’attente ajax Chargement du texte du bouton Bootstrap avec Angularjs Comment créer ces éléments de dom nesteds avec jQuery? Comment déclencher onbeforeunload avec le bouton Précédent dans une application basée sur ajax? Changer dynamicment le texte en fonction de l’option sélectionnée, javascript conversion de date / heure de json au format lisible Puis-je append une colonne à slickgrid à la volée? La fonction de chargement de jQuery ne fonctionne pas localement

Comment puis-je savoir qu’une entrée de forme a changé?

J’ai un formulaire généré par qui contient beaucoup d’entrées et de texareas.

Lorsqu’une valeur d’entrée change, j’ai besoin de le savoir et de marquer l’entrée et le formulaire comme “sales”. Si l’utilisateur tente de quitter la page sans enregistrer, je lui demanderai de confirmer l’abandon des modifications.

Toute suggestion sur la façon dont cela devrait être fait?

Les contrôles html incluent une propriété qui contient la valeur d’origine. Vous pouvez comparer cette valeur à la valeur actuelle pour voir si des modifications ont été apscopes. 

 function getHasChanges() { var hasChanges = false; $(":input:not(:button):not([type=hidden])").each(function () { if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) { hasChanges = true; return false; } else { if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) { hasChanges = true; return false; } else { if ((this.type == "select-one" || this.type == "select-multiple")) { for (var x = 0; x < this.length; x++) { if (this.options[x].selected != this.options[x].defaultSelected) { hasChanges = true; return false; } } } } } }); return hasChanges; } function acceptChanges() { $(":input:not(:button):not([type=hidden])").each(function () { if (this.type == "text" || this.type == "textarea" || this.type == "hidden") { this.defaultValue = this.value; } if (this.type == "radio" || this.type == "checkbox") { this.defaultChecked = this.checked; } if (this.type == "select-one" || this.type == "select-multiple") { for (var x = 0; x < this.length; x++) { this.options[x].defaultSelected = this.options[x].selected } } }); }

De jQuery Docs: 

 //This applies to whole form $('#formID').change(function() { alert('Form changed!'); });

Et vous pourriez faire comme ceci pour vérifier uniquement les entrées et en avertir l’utilisateur s’il tente de quitter sans enregistrer les modifications. 

 var inputsChanged = false; $('#formID input').change(function() { inputsChanged = true; }); $(window).unload(function() { if (inputsChanged === true) { alert('Would you like to save your edits before exiting?'); } });

API jQuery .change ()

Ressusciter cette vieille question parce que je pensais à un moyen plus simple / meilleur. Au lieu d’écouter les événements sur les différentes entrées, vous pouvez sérialiser les données de formulaire initiales, les stocker, puis les sérialiser à nouveau plus tard et vérifier si elles ont changé, comme ceci: 

 var originalFormData = $('form#formId').serialize(); function checkFormChanged() { if(originalFormData !== $('form#formId').serialize()) { //it's dirty! } }

Un avantage supplémentaire ici est que si l’utilisateur apporte une modification puis la rétablit , cette vérification indiquera que le formulaire est pur.

Je le ferais avec jQuery. Ce serait quelque chose comme ceci (juste un brouillon, vous devrez peut-être append / changer du code): 

 $(document).ready(function() { $('#formId:input').each(function(key) { $(this).change(function() { $(this).addClass('dirty'); }); }); });

Ensuite, avant de poster, vérifiez s’il ya une entrée sale. Vous pouvez même append de la couleur en utilisant la classe css sale.

EDIT: typo fixe ‘changé’ en ‘changement’

Vous pouvez utiliser jquery plugin dirrty pour identifier le formulaire sale.

https://github.com/rubentd/dirrty

Dans l’événement on (“dirty”), définissez une variable globale sur true pour identifier la forme a été modifiée.

window.onbeforeunload ou $(window).unload() et obtenez une confirmation de l’utilisateur en fonction de la valeur de cette variable.

L’avantage de ce plugin est que vous pouvez suivre si le formulaire est à nouveau remplacé par les valeurs d’origine à l’aide de l’événement ‘on (“clean”).