Comment puis-je savoir qu'un formulaire de saisie a changé?

J'ai un formulaire généré par <% Ajax.BeginForm() {} %> qui contient beaucoup d'entrées et de texareas.

Lorsqu'une entrée de changement de valeur, j'ai besoin de savoir à ce sujet et marque l'entrée et la forme comme "sale". Si l'utilisateur tente de quitter la page sans enregistrer, je vais lui demander de confirmer l'abandon de changements.

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

InformationsquelleAutor tkalve | 2010-12-30
  1. 26

    Les commandes html inclure une propriété qui contient la valeur d'origine. On pourrait comparer cette valeur avec la valeur actuelle pour voir si des modifications ont été apportées.

    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
}
}
});
}
    • J'aime vraiment cette façon de vérifier si la valeur est égale à la valeur par défaut, et je pense que ce serait très bien fonctionner dans une "forme traditionnelle". Cependant, je vais présenter les changements à travers un XMLHttpRequest et j'ai besoin de "réinitialiser" le formulaire lors de l'envoi de leur succès. Est-il un bon moyen je peux set la valeur par défaut/defaultChecked etc. à la valeur actuelle?
    • Merci. J'ai fait quelques modifications plus, en ajoutant le nombre de champ. 🙂
    • Thumbs up pour excès de vitesse et l'utilisation de "ce" au lieu de "$(this)" pour obtenir le pur javascript "type".
    InformationsquelleAutor Tom Brothers
  2. 21

    De jQuery Docs:

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

    Et vous pourriez faire comme ceci pour vérifier que les entrées et l'utilisateur averti, si elles tentent 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?'); 
}    
});

    jQuery API .modifier()

    • Cela a très bien fonctionné pour moi. En Plus, c'est plus simple et utilise moins de code que l'on a accepté la réponse.
    InformationsquelleAutor Damiqib
  3. 17

    Ressusciter cette vieille question, parce que j'ai pensé à un simple/mieux. Au lieu d'écouter les événements sur les diverses entrées, vous pouvez sérialiser la forme initiale de données, les stocker, puis sérialiser à nouveau plus tard et de vérifier si ça a changé, comme ceci:

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

    Un autre avantage, c'est que si l'utilisateur fait un changement, puis revient il, cette vérification rapport de la forme propre.

    InformationsquelleAutor SwabTheDeck
  4. 8

    Je voudrais le faire avec jQuery. Il serait quelque chose comme ceci (juste un projet, vous devrez peut-être ajouter/changer une partie du code):

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

    Alors, avant de Poster, vérifiez si il y a une sale d'entrée. Vous pouvez même ajouter de la couleur à l'aide de la sale de classe css.

    EDIT: correction de fautes de frappe 'changé' à 'modifier'

    InformationsquelleAutor goenning
  5. 1

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

    https://github.com/rubentd/dirrty

    Sur("sale") l'organisation d'une épreuve de certaines global variable à true pour identifier la forme a changé.

    Poignée window.onbeforeunload ou $(window).unload() événement et obtenir la confirmation de l'utilisateur basée sur la valeur de la variable.

    L'avantage de ce plugin est que vous pouvez retrouver si le formulaire est changé aux valeurs d'origine, en utilisant à nouveau 'sur("propre"), événement

    InformationsquelleAutor Santhosh S