Javascript onbeforeunload function

Question

I am trying to call this confirmation function on onbeforeunload event but its not getting called. What am I missing here?

I am calling this inside the body tag:

<body onbeforeunload="confirmation();">

I also tried:

<body onbeforeunload="return confirmation();">

Code:

  function confirmation(){
  var answer = confirm('You have unsaved changes!!');
   if(answer == true)
    {
     alert('Bye Bye!!!');
    }
    else{
      alert('You are staying');
     return false;
    }
   }

Can you please clarify either your sample code or your title to reflect which event you are trying to capture? — Mike Clark, Jun 02 '11 at 18:12
That's not how a "beforeunload" handler works. [Read this.](https://developer.mozilla.org/en/DOM/window.onbeforeunload). As it is now, regardless of the answer to your "confirm()" call, the page will be reloaded. — Pointy, Jun 02 '11 at 18:14

Matt Ball · Answer 1 · 2011-06-02T18:26:24.413

5

That's not remotely how onbeforeunload works, and the code contains syntax errors.

window.onbeforeunload = function (e)
{
    var e = e || window.event,
        message = 'You have unsaved changes!!';

    // For IE and Firefox prior to version 4
    if (e)
    {
        e.returnValue = message;
    }

    return message;
}

edited Jun 02 '11 at 18:26

answered Jun 02 '11 at 18:13

Matt Ball

354,903
100
647
710

And note that the string that's returned may or may not be shown to the user. (In newer browsers it isn't.) – Pointy Jun 02 '11 at 18:17
Really? Which browsers? Chrome 11 certainly shows the string to the user. – Matt Ball Jun 02 '11 at 18:19
Firefox 4 won't show the string, and I suspect that that'll get more common. – Pointy Jun 02 '11 at 18:21
Folks I am on IE7. now function is getting called but in both the cases(ok, cancel) window is closing down. – t0mcat Jun 02 '11 at 18:23
1

@t0mcat are you returning a string from the function, and are you setting the "returnValue" property of the event object? – Pointy Jun 02 '11 at 18:27
@Matt Ball however [see this bug](https://bugzilla.mozilla.org/show_bug.cgi?id=641509) for evidence that the decision isn't popular :-) IE9 shows the text, apparently, but in a way that makes it clear (or tries to do so) that the message is not from the browser or the local machine, but from the website. (Not sure that the phishing victims they're protecting will know what that means anyway ...) – Pointy Jun 02 '11 at 18:36
@Pointy, @Matt, Sorry I am real confused here. Should I define the code you provided inside another method and then call the method from body tag? – t0mcat Jun 02 '11 at 18:58
1

@t0mcat all you need is the code that is in Matt Ball's answer. That's it. – Pointy Jun 02 '11 at 19:01
Hi Pointy, I got Matt's flow but do I just need to add inside a script tag or call it though body tag? – t0mcat Jun 02 '11 at 19:03
1

You should add it in a ` – Pointy Jun 02 '11 at 19:04
Thanks Pointy. I apologize for being to naive.. this is just new to me. So finally it did work. I am going to bug you guys one last time, Is it possible to override the default text? Right now I am seeing my text wrapped between default text of confirm box – t0mcat Jun 02 '11 at 19:14
"The default statement that appears in the dialog box, " Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered." from http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx. Is this true? that would suck – t0mcat Jun 02 '11 at 19:15
1

There's a discussing regarding this problem here http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own . I think its not possible :( – t0mcat Jun 02 '11 at 19:20
Maybe you could write your findings as an answer and mark it as _the_ answer? :) – TweeZz Jun 02 '11 at 19:45
I will try to find but wont pick it as an answer because you guys helped me so much. – t0mcat Jun 02 '11 at 20:00

TweeZz · Answer 2 · 2011-06-02T20:26:02.010

Soooo.. You're trying to ask the user for confirmation when he made changes on your page that will not be saved if he leaves the page. Is that correct?

If so, then that seems to be possible. Try the following on SO. Start to write an answer on this question and then try to close the browser window.

I tested in Chrome 12, FF 4.0.1 and IE 9.
All 3 browsers show a popup window. It seems they all contain a custom text. Chrome shows the cleanest message, meaning a popup with only the custom message and 2 buttons.
In all 3 browsers trying to close the browser in any normal way triggers a popup that allows the user to choose if he maybe doesn't rather stay on the page and finish what he started. If he does want to leave, he can. (killing the browser process or a computer shutdown might not do what you would like thoug :) ).

Internet Explorer:
enter image description here

Firefox:
enter image description here

Chrome:
enter image description here

I would try the suggestion of hooking up a function that returns a string to the window.onbeforeunload event. Try this:

<script>
window.onbeforeunload = function (evt) {
  var message = 'You have started writing or editing a post.';
  if (typeof evt == 'undefined') {
    evt = window.event;
  }
  if (evt) {
    evt.returnValue = message;
  }
  return message;
}
</script>

Javascript onbeforeunload function

2 Answers2

Linked