4

I have a web page that contains a textbox and a submit button. When the user edits the text in the textbox and clicks another link (not the submit button) how do I display the 'Are you sure you want to navigate away from this page' popup message?

I have researched this on the net and found a few javascript examples. Is this the only way you can do this? If not, what is the best way to do it?

Theomax
  • 6,584
  • 15
  • 52
  • 72

8 Answers8

5

This is one of the multiple 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

Andrei G
  • 1,590
  • 8
  • 13
  • Your code will fire also on closing browser,links, back and forward navigation link , on refreshing the page, Hence worth it is not appropriate to use onbeforeunload – Kunal Vashist Feb 22 '12 at 13:45
1

Only the unload() event will work on JS. You can't manage it on the server.

napolux
  • 15,574
  • 9
  • 51
  • 70
1

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

How to show the "Are you sure you want to navigate away from this page?" when changes committed?

Community
  • 1
  • 1
Anthony Shaw
  • 8,146
  • 4
  • 44
  • 62
1

Simple solution

    window.onbeforeunload = confirmExit;

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

4guysFromRolla.com - Prompting a user to Save when Leaving a Page

Mubarek
  • 2,691
  • 1
  • 15
  • 24
  • 1
    Your code will fire also on closing browser,links, back and forward navigation link , on refreshing the page, Hence worth it is not appropriate to use onbeforeunload – Kunal Vashist Feb 22 '12 at 13:44
  • 2
    @KunalVashist Yes you're right and it's meant for that. It is typically useful for data input pages. Down page of the link I provided is a code for checking to fire the only when changes are made ! – Mubarek Feb 22 '12 at 13:48
  • But refreshing page can cause the problem , in this case am not leaving the page .. – Kunal Vashist Feb 22 '12 at 13:59
  • 1
    @KunalVashist of course you're leaving when you refresh it means requesting new version of the page while you've got something to save, in such case it should prompt whatsoever if you try to execute any other action outside of the input form. I'm really curious KunalVashist do you've some other mechanism to avoid this in case I did make no change to the form and want to refresh my page. – Mubarek Feb 22 '12 at 20:44
  • Yes, cookie can be used to detect refreshing of the page,, you can do like this when the site is hit first time build a cookie with time stamp , and compare this time stamp on refreshing of page. – Kunal Vashist Feb 23 '12 at 06:31
1

If you want to do this in a way that guarantees it will work on almost all browsers, use the JQuery library. The following describes the unload event.

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

It's exactly for purposes like yours.

Just to elaborate a little, you would have to download the jquery js library and reference it in your project/page, but you'll probably want to do that eventually anyway.

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

swannee
  • 3,346
  • 2
  • 24
  • 40
  • this will not allow you to block the navigation, however, which would be the point. If you present a confirm box to the user asking if they want to cancel the navigation so they can save their changes, the page will navigate away anyway, and the changes will be lost. – JoeBrockhaus Jan 12 '15 at 20:13
1

You cannot use the onbeforeunload window method as it gets triggered by multiple ways like back and forth browser navigation links, refreshing the page, closing of the page, clicking on the links.

What i feel you have to bind the link tag for which you want display the navigation away message and then use the function for the status message display

 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
}
Kunal Vashist
  • 2,380
  • 6
  • 30
  • 59
0

I was able to get this to work with Andrei G's answer. I would add on that to get it to work in Chrome, add this to the end of his goodbye function:

return "";

Rudy Scoggins
  • 431
  • 3
  • 8
0

Look into Jquery's .beforeunload property. Here is an example:

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

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

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

Finally, don't forget to referrence jQuery in your head tag by using:

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

The above gets you the latest version from the internet and saves you the trouble to download it, and of course you can do so optionally, but I am just trying to get your thing to work asap. Oh, I also found an example for you. Click here to see a page that calls a function before it closes. Hope this helps bud.

Lukas
  • 2,885
  • 2
  • 29
  • 31