Trinidev

Vous souhaitez alerter vos utilisateurs s’ils ont modifié le contenu d’un formulaire et qu’ils s’apprêtent à quitter la page par l’intermédiaire d’un lien sans avoir validé ?

Un petit javascript permet de facilement accomplir cela.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery(document).ready(function() {
	$(window).attr("isDirty", false);
	$(":input").bind("change", function(event) {
				if (event.target.value != event.target.defaultValue) {
					$(window).attr("isDirty", true);
				}
			});
	$(":checkbox,:radio").bind("click", function(event) {
				if (event.target.checked != event.target.defaultChecked) {
					$(window).attr("isDirty", true);
				}
			});
	$("a, button").bind("click", function(event) {
		if (window.isDirty) {
			return confirm("Etes-vous sûre de vouloir quitter cette page sans enregistrer ?");
		}
	});
}

L’astuce consiste à créer un attribut isDirty attaché à la page et à en changer l’état dès qu’une valeur de champ a été modifiée. Au chargement de la page, on attache des listeners aux champs, checkbox et boutons radio qui vont scruter leurs éventuelles modifications. Lorsque l’utilisateur clique sur un lien, on vérifie juste la valeur de cet état pour déclencher une demande de confirmation le cas échéant (qui dans le cas négatif, interrompt l’événement de changement de page).

On peut facilement adapter ce code à Prototype ou à MooTools afin de réaliser la même chose avec ses librairies.