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;
});