Comment savoir si une entrée de formulaire a été modifiée?

Question

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

Quand une valeur d'entrée change, j'ai besoin de savoir à ce sujet et de marquer l'entrée et le formulaire comme "sale". Si l'utilisateur tente de quitter la page sans enregistrer, je lui demanderai de confirmer l'abandon des modifications.

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

Answer 1

Les commandes html comprennent une propriété qui détient la valeur d'origine. Vous pouvez comparer cette valeur avec la valeur actuelle pour voir s'il y a eu des changements.

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

Answer 2

De jQuery Docs:

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

Et vous pouvez faire comme ceci pour vérifier que les entrées et ont informé l'utilisateur, si elles essaient 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 .change()

Answer 3

Je ferais cela avec jQuery. Ce serait quelque chose comme ça (juste un projet, vous devrez peut-être ajouter/modifier un code):

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

Puis, avant de poster, vérifier s'il y a une entrée sale. Vous pouvez même ajouter de la couleur en utilisant la classe css sale.

EDIT: Correction d'une faute « changé » pour le « changement »

Answer 4

Ressusciter cette vieille question parce que je pensais à un moyen plus simple. Au lieu d'écouter les événements sur les différentes entrées, vous pouvez sérialiser les données de forme initiale, le stocker, puis sérialiser plus tard et vérifier si elle a changé, comme ceci:

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

Un avantage supplémentaire est que si l'utilisateur fait une modification et la retourne, cette vérification signalera le formulaire comme propre.