Coder Perfect

When modifications are committed, how do you show the “Are you sure you want to navigate away from this page?” message?

Category: javascript

Tag: , , , ,

Problem

If you start making changes and then try to navigate away from the page on stackoverflow, a javascript confirm button appears and says, “Are you sure you want to navigate away from this page?” blee blah blah blah blah blah blah blah blah

Has anyone done this before, and if so, how do I track that the modifications were made? I believe I am capable of doing this on my own, and I am attempting to learn best practices from you, the professionals.

I’ve tried the following, but it’s still not working:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

Is there anyone who can provide an example?

Asked by Shimmy Weitzhandler

Solution #1

Displaying a custom message is currently considered a security risk by modern browsers, and it has been disabled in all of them. Only generic messages are now displayed by browsers. It’s as simple as: Now that we don’t have to worry about setting the message, it’s as simple as:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

For information on how to use legacy browsers, see the section below.

The original solution is still valid for IE6-8 and FX1-3.5 (which is what we were targeting back in 2009 when it was written), but it’s a little out of date now and won’t function in most modern browsers – I’ve included it below for reference.

All browsers do not treat window.onbeforeunload in the same way. Although it should be a function reference rather than a string (as the original answer suggested), this will work in older browsers because the majority of them appear to check whether anything is assigned to onbeforeunload (including a function that returns null).

You set window.onbeforeunload to a function reference, but in older browsers, instead of just sending a string, you must set the event’s returnValue:

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

If you want the user to proceed without the notification, you can’t have confirmOnPageExit execute the check and return null. To reliably switch it on and off, you must still remove the event:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

To activate it, follow these steps:

window.onbeforeunload = "Are you sure you want to leave?";

To turn it off, follow these steps:

window.onbeforeunload = null;

Keep in mind that this isn’t a typical event, therefore you won’t be able to link to it in the usual way.

To perform a value check? That is dependent on the validation framework you use.

In jQuery, this may look like this (very basic example):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Answered by Keith

Solution #2

onbeforeunload is a function that is called before a file is loaded Microsoft-ism is the closest thing we have to an uniform solution, but be warned that browser support varies; for example, Opera version 12 and later are the only ones that work (still in beta as of this writing).

Also, as mentioned on the Mozilla Developer Network, you must do more than merely return a string for optimum compatibility.

Example: To enable/disable the navigation prompt, define the following two functions (see the MDN example):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

Then create a form that looks like this:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

This manner, the user will only be instructed to go away if he has altered the text box, rather than when he is really submitting the form.

Answered by Søren Løvborg

Solution #3

To make this work in Chrome and Safari, follow the steps below.

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

Reference: https://developer.mozilla.org/en/DOM/window.onbeforeunload

Answered by sshow

Solution #4

This is really simple to accomplish with JQuery. You can bind to sets because you can bind to them.

It’s not enough to implement the onbeforeunload; you want the navigate away to only be triggered if someone starts changing something.

Answered by Sam Saffron

Solution #5

For me, jquery’s ‘beforeunload’ function worked perfectly.

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

Answered by Devon Peticolas

Post is based on https://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch