Coding style

Grand sujet que l’édition de contenu par l’utilisateur, via une administration de site. La plupart de ces sites comportent des formulaires dédiés à la saisie ou l’édition d’une donnée, mais que se passe t’il lorsque l’utilisateur ferme la fenêtre ou clique sur un lien présent dans la page ?

Voici une solution assez facile à mettre en oeuvre dans la page, résidant dans l’utilisation d’une somme MD5 de tous les champs de formulaires intéressants (champs textes, boutons radios, cases à cocher, listes déroulantes…). Une librairie MD5 peut être trouvée sur ce site.

Première étape : on concatène les valeurs des champs dans une variable

var tags = new Array("INPUT", "TEXTAREA", "SELECT");
var content = "";
 
for (var tag in tags) {
	var nodes = document.getElementsByTagName(tag);
 
	for (var i = 0; i < nodes.length; i++) {
		if (tag == "INPUT" || tag == "TEXTAREA") {
			content += nodes[i].value;
			continue;
		}
 
		if (tag == "SELECT" && nodes[i].selectedIndex != -1) {
			content += nodes[i].options[nodes[i].selectedIndex].value;
		}
	}
}

A l’initialisation de la page, faites une première somme MD5 des valeurs concaténées. Son résultat correspondra à l’état initial de la page.

var initialSum = "";
 
window.onload = function() {
	var content = getContent(); // C'est le bout de code du paragraphe précédent
	initialSum = calcMD5(content);
}

Lorsque l’on quitte la page, reconcaténez les valeurs, refaites la somme MD5 et comparez :

window.onunload = function() {
	var content = getContent();
	var finalSum = calcMD5(content);
 
	if (finalSum != initialSum) {
		return confirm('Attention : des données ont été modifiées. ' +
				'Etes-vous sûr de vouloir continuer ?');
	}
 
	return true;
}

Il reste un petit détail significatif. La validation du formulaire en lui même déclenche également l’évènement unload de la fenêtre ! Voici la parade :

document.getElementById('monFormulaire').onsubmit = function() {
	window.onunload = null;
}