How to make a warning "Are you sure you want to go from this page" in the browser?

Question

I have a webpage containing a text box and a submit button. When a user edits text in a text box and clicks on another link (rather than a submit button), how do I display a pop-up message "Are you sure you want to go from this page"?

I researched this on the net and found some javascript examples. Is this the only way to do this? If not, what is the best way to do this?

Answer 1

This is one of several ways to achieve the same thing.

function goodbye(e) { if(!e) e = window.event; //e.cancelBubble is supported by IE - this will kill the bubbling process. e.cancelBubble = true; e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog //e.stopPropagation works in Firefox. if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } } window.onbeforeunload=goodbye; 

got it from here open js

Answer 2

In JS, only the unload () event will work. You cannot manage it on the server.

Answer 3

Check out the answer to this other question about SO, it is very similar to your question

How to display "Are you sure you want to go from this page?" when did the changes happen?

Answer 4

A simple solution

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

4guysFromRolla.com - user request to save when leaving the page

Answer 5

If you want to do this in such a way as to guarantee that it will work in almost all browsers, use the jQuery library. The unload event is described below.

http://www.w3schools.com/jquery/event_unload.asp

This is for your purpose.

To figure it out a bit, you will need to download the jquery js library and reference it in your project / page, but you probably want to do this in the end.

If you want to control this from the server side, you can dynamically emit a jquery call in OnPreRender.

Answer 6

You cannot use the onbeforeunload window method, as it is launched in several ways, such as browser back and fourth navigation links, refreshing the page, closing the page, clicking on the links.

How I feel, you need to bind the link tag for which you want to display a navigation message, and then use the function to display status messages

  window.addEvent('domready',function(){ $$('a').addEvent('click', function(e) { //leaving(); function u wrote for displaying message }); }); function leaving(e) { if(!e) e = window.event; // return code for the displaying message } 

Answer 7

Take a look at the Jquery.beforeunload property. Here is an example:

 $(window).bind('beforeunload', function(){ return 'Click OK to exit'; }); 

Please note: beforeunload canot does not allow you to unload a page or redirect it to another page for obvious reasons; it would be too easy to abuse. Also, if you just want to run the function before unloading, try the following:

 $(window).unload(function(){ alert('Bye.'); }); 

Finally, remember to pass jQuery to your header tag using:

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

The above version contains the latest version from the Internet and eliminates the need to download it, and of course you can do it as you wish, but I'm just trying to get your work to work as soon as possible. Oh, I also found an example for you. Click here to see the page that calls the function before closing it. Hope this helps the kidneys.

Answer 8

I was able to get this to work with the answer of Andrew G. I would add that for it to work in Chrome, add this to the end of your goodbye:

return "";