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?

0

8 Answers 8

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

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 Feb 22, 2012 at 13:45
1

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

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?

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

5
  • 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 Feb 22, 2012 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, 2012 at 13:48
  • But refreshing page can cause the problem , in this case am not leaving the page .. Feb 22, 2012 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, 2012 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. Feb 23, 2012 at 6:31
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
}
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.

1
  • 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. Jan 12, 2015 at 20:13
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.

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 "";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.