Capturing window.onbeforeunload

Question

I have a form where the input fields are saved onChange. In Firefox (5) this works even when the window is closed, but for Chrome and IE it doesn't and I need to be sure that I'm saving this data even if they try to close the window after they've typed in a field but an onBlur event hasn't occurred (i.e. they've typed something into a textbox, but haven't tabbed out of it).

I have read the following SO articles on using window.onbeforeunload: article 1 article 2

if I use the following:

window.onbeforeunload = function() {     return "onbeforeunload"; } 

then I get a popup with onbeforeunload in.

but if I try:

window.onbeforeunload = function() {     alert("onbeforeunload"); } 

then nothing happens in any browser, even Firefox.

what I want to achieve is:

window.onbeforeunload = function() {     saveFormData(); } 

I'd be grateful if someone could point out where I might be going wrong.

Answer 1

You have to return from the onbeforeunload:

window.onbeforeunload = function() {     saveFormData();     return null; }  function saveFormData() {     console.log('saved'); } 

UPDATE

as per comments, alert does not seem to be working on newer versions anymore, anything else goes :)

FROM MDN

Since 25 May 2011, the HTML5 specification states that calls to window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event.

It is also suggested to use this through the addEventListener interface:

You can and should handle this event through window.addEventListener() and the beforeunload event.

The updated code will now look like this:

window.addEventListener("beforeunload", function (e) {   saveFormData();    (e || window.event).returnValue = null;   return null; }); 

Answer 2

There seems to be a lot of misinformation about how to use this event going around (even in upvoted answers on this page).

The onbeforeunload event API is supplied by the browser for a specific purpose: The only thing you can do that's worth doing in this method is to return a string which the browser will then prompt to the user to indicate to them that action should be taken before they navigate away from the page. You CANNOT prevent them from navigating away from a page (imagine what a nightmare that would be for the end user).

Because browsers use a confirm prompt to show the user the string you returned from your event listener, you can't do anything else in the method either (like perform an ajax request).

In an application I wrote, I want to prompt the user to let them know they have unsaved changes before they leave the page. The browser prompts them with the message and, after that, it's out of my hands, the user can choose to stay or leave, but you no longer have control of the application at that point.

An example of how I use it (pseudo code):

onbeforeunload = function() {    if(Application.hasUnsavedChanges()) {     return 'You have unsaved changes. Please save them before leaving this page';   }   }; 

If (and only if) the application has unsaved changes, then the browser prompts the user to either ignore my message (and leave the page anyway) or to not leave the page. If they choose to leave the page anyway, too bad, there's nothing you can do (nor should be able to do) about it.