Displaying ‘Unsaved Changes’ message for a web page using jQuery

I had a need to allow a user to cancel navigation to another page if changes to a form had not yet been saved – especially if they attempted to navigate to another page from the ever present menu. The code I used has a slight ‘hack’ which involves using the propertychange DOM event in IE rather than the change event which I would have usually expected.

Here’s the code that sets a global flag to indicate there’s an unsaved change :

var _changesMade = false;
$(document).ready(function() {

   $('form').bind($.browser.msie ? 'propertychange' : 'change', function() {
       _changesMade = true;
   });

   $(window).bind('beforeunload', function() {
       if (_changesMade)
           return 'There are unsaved changes which will be lost if you continue.';
   });
});

There are a couple of caveats. Any button that actually does the save will need a OnClientClick that sets the _changesMade to false to prevent the message from being displayed :

<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="button" OnClick="btnSubmit_Click" 
    OnClientClick="_changesMade=false; return true;" /> 

Also, if you have any code that causes the change event to fire (DOM manipulation after an Ajax call) then you might have to save the state of the _changesMade flag, make the DOM changes then reset the flag to it’s original value.