Handling Page Unload Using JavaScript

Recently for one of my projects, I was working on trying to implement some functionality wherein if the user tried to leave web page by any other means other than submitting a form, (s)he would be prompted for confirmation. It was part of one of the research experiment surveys that I was designing. So, if the user left the page, we would simply discard the user's responses as invalid because partial responses are of no use to do any meaningful analysis.

Apparently, there are plenty of ways in which a user can close a webpage - the back button, the close button, or maybe some other gestures that I might be unaware of that are present in some of the newer web-browsing applications/devices.

What I found interesting was that there is a very simple and convenient way to check when a page is being 'unloaded' from a browser window. Javascript lets you bind a neat little handler to the 'window.onbeforeunload' property which tells the runtime that a web page is going to be unloaded.

Being a jQuery fanatic, I usually tend to use jQuery for all such stuff, since it makes maintenance a far easier task than writing pure JavaScript. So, my jQuery instincts told me to use the new on method to bind an event handler to the event. And it did work pretty good. All I did was this -

window.onbeforeunload = function(){ return "Are you sure
you want to leave the page?"; };

Oh, I am sure that message looks familiar on many marketing sites. You can be assured that I am not creating one more such website. In fact, even the message that I displayed was  something completely different. This is just meant to be a sample.

Easy peasy, and that works. Now, the issue comes when the user actually submits the form. The issue is that this function fires if the user leaves the page in any way, which does make a lot of sense, because after all, the user is leaving the page.

However, what I did not want was for the function to fire when the user submitted the form. So, what did I do? I just created a submit handler for my form and then tried to unbind the event handler using the off function of jQuery.

Neat as it may sound, that did not work. I am still not sure why. However after going through a couple of posts wondering what I had done wrong, it dawned on me that a better way to handle this feature was to both bind and unbind an event handler for this function directly using pure JavaScript.

So, this is what i eventually ended up doing

//For binding
window.onbeforeunload = confirmExit;
function confirmExit()
{
 return "Are you sure you want to leave this page?";
}
 
//For unbinding
$('#myForm').submit(function(event){
 window.onbeforeunload = null;
});

And that's pretty much all it took to create a page that warns the user before (s)he accidentally (or intentionally) attempts to leave a web page.