We have all seen the Javascript navigate-away warnings that display a message if you try to, well, navigate away from the current page. A lot of sources teach that you need to add an onChange or onClick event to every control on your page to determine whether the controls have been changed or not. If you have a lot of controls on your page this can be cumbersome and create a lot of code clutter.
In this article I will explain a method I’ve been using for several years that makes it very easy to enable the navigate-away warning for all controls on the page without having to add an event handler to each control. Of course, I’m assuming that you want to monitor all the controls on the page. If you want to monitor only selected controls, you should go ahead with adding an onChange handler to the controls that you want to monitor.
To start with, I’ll explain the concept of this method. When the page first gets loaded, we will use a Javascript function to iterate through all the input and textarea elements on the page and store their values in a single variable. When the user is about to leave the page, we will run the function again and compare its output with the variable where we stored the original values. If they are different, we will display the navigate-away warning.
First we include the handler of the onbeforeunload event. In other words, the function confirmNavigateAway will be called right before the page is unloaded.
window.onbeforeunload = confirmNavigateAway;
Next, we gather the values from all the input and textarea controls and store their values in the variable formValues.
formValues = saveFormValues();
This should be done after the contents of the page are loaded, so if you are using jQuery, you should put this code in $(document).ready:
$(document).ready(function() {
formValues = saveFormValues();
});
If you are not using jQuery, just place this code at the end of your html page encased in script tags. Now, here’s the function that saves the values:
function saveFormValues()
{
var values = "";
var controls = document.transactionForm.getElementsByTagName("input");
for (i = 0; i < controls.length; i++)
{
if (controls[i].type == 'checkbox')
values += controls[i].checked;
else if (controls[i].type == 'radio')
values += getRadioValue(controls[i]);
else if (controls[i].type == 'text')
values += controls[i].value;
}
controls = document.transactionForm.getElementsByTagName("select");
for (i = 0; i < controls.length; i++)
values += controls[i].value;
controls = document.transactionForm.getElementsByTagName("textarea");
for (i = 0; i < controls.length; i++)
values += controls[i].value;
return values;
}
As you can see, it iterates through all the edit boxes, check boxes, radio boxes, combo boxes and text areas, gathers their values and returns them as a string.
Here’s the function confirmNavigateAway(), which will be called before the visitor leaves the page:
function confirmNavigateAway()
{
if (formValues != saveFormValues())
return 'You have not saved the changes you made to this page.';
}
We compare the value from the global variable formValues to the value returned by saveFormValues() and if they differ, we return the text that should be displayed by the browser. The way this works is that if you return something from the function assigned to window.onbeforeunload, the browser will show the navigate away window. If you don’t, it won’t.
If you have a save or submit button on the page that submits the values from the controls, you will need to re-save the values again into formValues, so when the browser leaves the page because of a valid save operation, the values will match and the visitor won’t be presented with the warning message. So let’s just include:
formValues = saveFormValues();
just before the form is submitted. If you use javascript to submit the form, include this statement just before you call “submit”. If you are using a submit button that submits the form, add an onClick event and include the form there:
<input type="submit" value="Submit" onClick="formValues=saveFormValues();"/>
Hope you’ll find this helpful and will be able to piece it together.
