Quelle est la façon la plus facile de détecter si au moins un champ a été modifié sur un formulaire HTML?

Question

J'ai un formulaire HTML avec plus de 20 champs. J'ai aussi un couple de liens sur la page, qui va conduire l'utilisateur à l'écart de la forme... potentiellement sans avoir enregistré les modifications.

Je tiens à avertir (JS confirmer) l'utilisateur onClick de ces liens si l'un des champs du formulaire ont changé, mais je ne veux pas créer un énorme instruction switch que je puis avoir besoin de maintenir comme je l'ai ajouter de nouveaux champs à la forme. Je sais comment créer une longue liste de "si", énoncés dans le code Javascript, en nommant chacun des champs et la vérification de chaque valeur, mais je ne veux pas le faire si je peut sortir avec elle.

Quelle est la meilleure façon de vérifier si l'utilisateur a changé au moins une des valeurs de champ?

Answer 1

Approche

1. sérialiser la forme (et toutes ses valeurs), avant de montrer qu'il (jQuery façon, Prototype)
2. sérialiser à nouveau dans un "onbeforeunload" gestionnaire d'événements

Si les deux ne correspondent pas, alors ils ont changé la forme, afin de retourner une chaîne de caractères (par exemple, "Vous n'avez pas enregistré de données") à partir de votre onbeforeunload gestionnaire.

Cette méthode permet de champs de formulaire à évoluer alors que le "confirmer si changé" logique reste la même.

Exemple (mélange de javascript et jquery)

var form_clean;

// serialize clean form
$(function() { 
    form_clean = $("form").serialize();  
});

// compare clean and dirty form before leaving
window.onbeforeunload = function (e) {
    var form_dirty = $("form").serialize();
    if(form_clean != form_dirty) {
        return 'There is unsaved form data.';
    }
};

Answer 2

À l'aide de jQuery, c'est très facile. Vous devriez être en mesure d'utiliser le même principe pour obtenir le même résultat à la vanille javascript aussi.

var $inps = $('#myForm').find('input,select,textarea')
  , formAltered = false
;
$inps.change(function() {
    formAltered = true;
    $inps.unbind('change'); // saves this function running every time.
});

Le seul problème avec ceci est que si vous modifiez une valeur, et ensuite le changer en arrière à l'original, ça va encore rapport de la forme modifiée.

Answer 3

Voici un liner que vous pouvez ajouter à vos formulaires:

$(':input',document.myForm).bind("change", function() { 
  enablePrompt(true); }); // Prevent accidental navigation away

Et puis vous pouvez faire la enableUnloadPrompt() de la fonction pour l'ensemble de votre site:

function enablePrompt(enabled) {
  window.onbeforeunload = enabled ? "Your changes are not saved!" : null;
}

Et enfin, avant de soumettre le formulaire correctement, assurez-vous de:

enablePrompt(false);

Ce ne sera pas vérifier pour voir si la forme est différente dans les valeurs, que si le formulaire n'a jamais été changé par l'utilisateur. Mais, il est simple et facile à utiliser.

Answer 4

Cela pourrait être manipulés avec juste une variable booléenne, nous l'appelons sale peu de manipulation. Si vous avez observé, généralement dans des pages web, une fois que l'utilisateur effectue une action d'édition sur tous les champs de la forme est considérée comme sale(édité)(même si les données restent inchangés à la suite de l'édition). Lorsque l'utilisateur tente d'accéder à partir de la page de l'utilisateur est invité à le faire si il veut enregistrer les modifications.

Conformément à la pratique standard, il n'existe pas de vérifier si, après la modification d'une partie de terrain si la valeur effectivement changé ou pas. Pour exemple: Si l'utilisateur modifie et ajoute 'xyz' à un champ de texte, puis les supprime 'xyz' essentiellement la forme de données reste la même qu'avant, mais la forme est toujours considéré comme "sale" et l'utilisateur est invité message d'avertissement quand il essaie de naviguer loin.

Donc, si vous voulez mettre en œuvre ce que les choses deviennent assez simple. Vous n'avez qu'à ajouter onchange() gestionnaires d'événements pour les contrôles et mondiale de la variable booléenne quelque chose comme isDirty de vrai à l'intérieur de ces gestionnaires d'événements.

Une fois que l'utilisateur veut naviguer loin, vous pouvez flasher un message "Il peut y avoir des modifications non enregistrées sur la page en cours. Voulez-vous sauver?". Utilisateur de ne pas être déçu, même s'il remarque que son modifier ne pas modifier les données initiales.

Les réponses données ci-dessus de mettre en œuvre cette très comportement. Et j'ai écrit cela parce que tu semblais avoir une idée de vérifier chaque et chaque domaine, de par leur valeur initiale pour voir si c'était vraiment modifié après la modifier. Je voulais juste vous dire que la vérification de chaque champ n'est pas du tout nécessaire.