Check For Unsaved Changes Before Leaving a Page

After attempting to use JQuery and some other examples I came accross a easy way to handle warning an end user about unsaved changes using JavaScript. This is a modified version to handle, not only leaving the site, but if the end user attempted to navigate to another page on the same site.

In the example below I typed some text and clicked a radio button. Either of these actions would have prompted the warning message to be displayed once leaving the page.

The core of this is a simple JavaScript and checking the contents of a global variable in JavaScript. 


1. On the input fields add onclick (or onchange) attributes to the fields you want to track for any changes.
2. On any links that navigate away from the site or to a new page, add attributes that will check if the JavaScript global varible is TRUE. If it is the post back will stop and the warning message will be shown.  Also, if the user tries to navigate away from the site they will get the warning message as well.
3. Finally on a SAVE button clear the JavaScript global variable.

Sample project attached. (139.98 kb)

Comments are closed