OnBeforeUnload Event in Jscript

The OnBeforeUnload Event (Client side) in Jscript can be extremely useful. This event fires prior to a particular web page being unloaded, as the name suggests.

With this event, we can warn the user if he has some unsaved changes on the page and prevent him from accidentally moving away from the page or even closing the browser window before he saves the changes.

There are actually two steps in acheiving the above as given below

Without the first step, the user will get this message even if he hasn’t made any changes on the screen, which can be irritating.

The first step is pretty simple, we can use the onkeypress event of the web page form. The above said event fires whenever any key of the keyboard is pressed in a form field. We can also use the form’s mouse events to detect changes done with the mouse.

In these events, which are identified for detecting changes in the form, we set a particular value in a hidden field. We check for this value in the hidden field, if it is set, we know that one of the above identified events have fired, so we can warn the user that he has unsaved changes.

Now we can use the OnBeforeUnload event to detect the changes in the form and to alert the user in case there are some changes.

When a string is assigned to the return property of this event, a dialog box appears that gives users the option to stay on the current page. But, the default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.”,  cannot be removed or altered.

If the user clicks OK, his request is satisfied. He also has an option to stay on the current page by clicking Cancel.

In the sample below, the changes in the form are detected with only the onkeypress event.

The code for the above functionality is given below.

Type in something in the textbox shown in the form and then try and close the browser window, you should see the dialog box which warns you about unsaved changes.
 

Happy Coding !!