TIPS - Warning before navigate away from a web form without save

My users often click on a link or change page when they fill a form without save it before. Then, they lose all the informations.

With Lotus Notes client they have to confirm to exit the page. You can do the same thing on Web.



When to display the warning message ?
I prefer display the message only if the user have change the form. If you display the warning every time, the user will finish to ignore it. To detect if the form has been changed, I use an hidden field who his value is changed when one field of the form is changed:

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

To modifiy the value of this field I use javascript function. You can declare this function on the header of your form (or subform) or in Javascript library. This function can looks like that :

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

You just have to add a call to this function on the "onChange" event of the fields you want to control.
How to detect the user navigate away ?
To detect if a user navigate away the web page, you have to add the event onBeforeUnload. To do that, add to the header of our Notes form :

window.onbeforeunload = confirmExit;

Where confirmExit is a Javascript function who control if it's necessary to display the warning and where you can customize the message.

function confirmExit() {
  if(document.forms[0].isChanged.value=='1') 
    return "You've not save the form. Are you sure ?";
}

The first condition verify the hidden field of control to know if the form has been changed.