8

How can I ask the user Are you sure you want to leave the page?

Like for example if you click the back button while asking a question on Stackoverflow?

Georg Schölly
  • 124,188
  • 49
  • 220
  • 267
Mukesh Yadav
  • 2,256
  • 2
  • 33
  • 51
  • Your question doesn't make much sense, do you mean it checks the question without pressing the submit button? – Elliott Oct 22 '10 at 15:57
  • I think he means the confirmation dialog you get when you're half-way through writing a question on SO and hit your browser back button – Manos Dilaverakis Oct 22 '10 at 15:59
  • @Elliott, the question makes a lot sense. If there is text in the "Your answer" box and you navigate away from the page, even with browser back, it will alert you. – Klaus Byskov Pedersen Oct 22 '10 at 15:59
  • Manos is right, and I guess Question is right why I got down ? – Mukesh Yadav Oct 22 '10 at 16:01
  • 1
    Note the title on the vote buttons: "This question is unclear or not useful" - the fact that the commenters needed to pry the meaning of the question out of you probably means your question is unclear - and some people here downvote unclear questions. – Piskvor left the building Oct 22 '10 at 16:08
  • 1
    I think [this question](http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own) has what you're looking for. Which points to [this even more pertinent question](http://stackoverflow.com/questions/140460/client-js-framework-for-unsaved-data-protection). And here is [one more](http://stackoverflow.com/questions/1299452/how-do-i-stop-a-page-from-unloading-navigating-away-in-js) – rojoca Oct 22 '10 at 16:08
  • Related: https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes – Ciro Santilli OurBigBook.com Aug 19 '22 at 09:25

1 Answers1

4

The easiest way to do this is to bind an event handler to the "unload" JavaScript event. jQuery makes this very easy to do with its .unload() event handler. In the method you bind you can check to see if any the page's form fields have text input. Assuming they do pop an alert notifying the user they'll lose any unsaved data if they navigate from the page.

This method will fire an alert whenever the user navigates away from the page for any reason.

$(window).bind('beforeunload', function() {
  alert('Handler for .beforeunload() called.');
});

That's obviously not very user friendly but a couple of quick modifications can make it workable to your question.

ahsteele
  • 26,243
  • 28
  • 134
  • 248
  • 2
    I think you'll find the `unload` event is too late to prevent the user from leaving. You need to use the `onbeforeunload` event. Also you can't use jquery to bind to `onbeforeunload` in all browsers – rojoca Oct 22 '10 at 16:32
  • so you wanna say to use pure JavaScript instead jquery because of browser compatibility – Mukesh Yadav Oct 22 '10 at 16:38
  • @MakDotGNU - see the questions linked to in my answer. – rojoca Oct 22 '10 at 16:41
  • @rojoca updated to use `beforeunload`. Didn't realize `unload` was too late. Thanks for the tip. – ahsteele Oct 22 '10 at 16:43