CODEWITHSUNDEEP
c#javascriptasp.net
Theomax
Theomax

Reputation: 6792

How to make the 'Are you sure you want to navigate away from this page' warning message in browser?

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?

Upvotes: 4

Views: 9809

Answers (8)

Rudy Scoggins
Rudy Scoggins

Reputation: 451

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

Upvotes: 0

Lukas
Lukas

Reputation: 2923

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.

Upvotes: 0

swannee
swannee

Reputation: 3466

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.

Upvotes: 1

Kunal Vashist
Kunal Vashist

Reputation: 2471

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
}

Upvotes: 1

Mubarek
Mubarek

Reputation: 2689

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

Upvotes: 1

Anthony Shaw
Anthony Shaw

Reputation: 8166

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?

Upvotes: 1

napolux
napolux

Reputation: 16084

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

Upvotes: 1

Andrei G
Andrei G

Reputation: 1590

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

Upvotes: 5

Related Questions