Warn User Before Navigating Away from a Web Page

In rich client applications, it is easy to check to see if a document has been modified and react when the user closes the program or document. Not so easy with web pages. For example, when you close Word without saving, you get a warning and the option to save.

How can this be done with a web form?

My initial Google searches found the answer "it's not possible." But this is not true, as GMail prompts you before navigating away from the Compose Email screen (which has saved me lots of grief).

I think GMail uses some combination of the body onUnload event and rewriting/replacing the URL, but saving all data. OnUnload is triggered when the web page is unloaded, whether by navigating away or closing the browser window. However, it is not possible to interrupt this event, so while you could create a popup, it wouldn't be effective at stopping the close. IE has a non-standard onBeforeUnload event which, if the event has a non-null return value, displays a popup window with the return value as the body. The button has an OK and a Cancel. Cancel interrupts the onUnload event.

This event is available in Firefox now also.

So here's what I did

In the head, I created a flag to store whether the user should be warned.

<script type="text/javascript">
var transitionWarning=true;
</script>

Now, in the body tag I added the onBeforeUnload event:

onbeforeUnload="if (transitionWarning) return 'You will lose all unsaved changes if you navigate away!  To save your changes, press the save button'"

And then on the submit button I disable the transitionWarning so the user is not prompted when saving the form.

</input type=submit value=save onClick="transitionWarning=false;">