"If you leave this page, data you have entered may not be saved"

After receiving a request ticket today for the intranet system which my team has been developing, I'm set to look for a solution.

Stay or Leave

Criteria

Implement a "navigate away from browser" protection to prevent users from accidentally closing tabs or windows in Edit mode.  If user chose to stay on page, no changes should be made.

Solution

In the above example, a global variable, 'isDataChanged', is used to check whether any data is changed when the page is loaded.

Just remember to reset the variable whenever possible, you don't want to piss off users with the confirmation dialog box.  If you're not fancy of global variables, you may want to consider checking whether 

- The main edit pop-up dialog is not hidden

- Form element which stores the current mode is not equals to 'view'

This method is tested on the following browsers:

• Firefox 15.0
• Chrome 21.0
• Internet Explorer 9.0