ASTUCE - Avertissement avant de quitter une page Web

Il arrive souvent qu'un utilisateur, porté par la fougue de la navigation, clique sur un lien alors qu'il est en train de rédiger un formulaire qu'il n'a pas encore enregistré. Il doit alors tout refaire et se retrouve aigri.

Sous Lotus Notes, lorsque l'on ferme un formulaire, le client lourd a la prévenance d'avertir l'utilisateur qu'il devrait enregistrer ses données avant de quitter. Il est en fait assez simple de faire la même chose sur le Web.


Détection d'une modification sur le formulaire
Avant de l'avertir, mieux vaut vérifier que celà en vaut vraiment la peine. Un moyen simple est de se baser sur un champ qui sera modifié dès qu'un des champs a été modifié en se basant sur l'évènement onChange. Ce champ de controle n'a pas à être visible pour l'utilisateur on peut donc le déclarer en type "hidden" soit :

<input type="hidden" name="isChanged" id="isChanged" value="0">

Pour modifier la valeur du champ, on utilisera une fonction Javascript qui pourra être déclarée dans une librairie ou tout simplement dans "l'entête JS" du masque.
Cette fonction pourra être de la forme :

function formChange(){
  document.forms[0].isChanged.value="1";
}

On peut alors appeler la fonction dans l'évènement onChange de chaque champ que l'on souhaite controler en ajoutant :

formChange()

Détection que l'utilisateur quitte le formulaire
Il faut déclarer le nouvel évènement onBeforeUnload. Pour celà, dans l'entête JS du masque, ajouter :

window.onbeforeunload = confirmExit;

où confirmExit est une fonction Javascript permettant de vérifier s'il faut afficher la boite d'avertissement mais aussi de personnaliser un peu le message.

function confirmExit() {
  if(document.forms[0].isChanged.value=='1') 
    return "Vous avez effectuez des modifications sans les enregistrer.";
}

La première condition permet de vérifier s'il est utile de lui présenter la fenêtre de confirmation en allant vérifier la valeur du champ caché.