Stopping page navigation and wait for user to confirm

Question

I have allowed the user to make some changes in form fields and based on whether a user has made some changes, I enable the "Submit Changes" button.

I want to add a feature where I ask the user to confirm that he wants to navigate to some other page without submitting the changes done by him. I have added the code to show a dialog box but the problem is that the dialog is shown for small period and then page navigation moves to another page. My code is:

        window.onbeforeunload = function() {
            if(!dijit.byId('editBtn').get('disabled')) {
                discardChanges(
                        'Pending Unsaved Changes',
                        'You have pending unsaved changes. Do you really want to discard them?',
                        'Discard Changes',
                        function() {
                            return true;
                        },
                        function() {
                            return false;
                        },
                        300,
                        700);
            }
        }

How do I stop the browser from moving to other page and wait for user to click a button on the dialog box and then decide if click is to be discarded or not. The dialog box looks like:

enter image description here

You need to return a value immediately. I assume your `discardChanges` puts up a fancy dialogue box, but it doesn't wait for the user to click on the buttons. Therefor your function at `onbeforeunload` actually returns `undefined` and the page is redirected. — some, Sep 10 '12 at 12:09
You are right. Is there a way to avoid the native confirm box of browser and use the dojo based dialog box which I already have in place. — Piyush-Ask Any Difference, Sep 10 '12 at 14:20
As far as I know, no, because of security reasons. Late versions of Firefox don't event show the custom message, only the native one. Chrome, Safari and IE shows both a native and the custom message. Opera doesn't support the event. — some, Sep 10 '12 at 14:40

phusick · Answer 1 · 2012-09-10T12:11:28.787

5

Use event window.onbeforeunload, which fires when the page is unloaded and return string "You have pending unsaved changes. Do you really want to discard them?"

Browser shows native dialog:

enter image description here

This is AFAIK the only way to stop navigation.

jsFiddle: http://jsfiddle.net/phusick/R6EJ3/show/light/

edited Sep 10 '12 at 12:11

answered Sep 10 '12 at 11:58

phusick

7,342
1
21
26

score 3 · Accepted Answer · answered Sep 10 '12 at 14:56

Too many sites has abused this functionality so for security reasons browsers had added counter measures.

Opera don't support the event. Modern versions of Firefox only shows a standardized native message. Chrome, Safari and IE shows both a native message and the custom message returned from the function. As far as I know, you can't stop the event.

I suggest that you instead save the changes as a draft. Be aware that Opera don't support the event, so you might need to save the changes according to a timer. By saving it as a draft by a timer, you will as a bonus also be able to let the user return and continue after a browser crash.

score 0 · Answer 3 · edited May 23 '17 at 11:58

Update (2013)

The orginal answer is suitable for IE6-8 and FX1-3.5 (which is what we were targeting back in 2009 when it was written), but is rather out of date now and won't work in most current browsers - I've left it below for reference.

The window.onbeforeunload is not treated consistently by all browsers. It should be a function reference and not a string (as the original answer stated) but that will work in older browsers because the check for most of them appears to be whether anything is assigned to onbeforeunload (including a function that returns null).

You set window.onbeforeunload to a function reference, but in older browsers you have to set the returnValue of the event instead of just returning a string:

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

You can't have that confirmOnPageExit do the check and return null if you want the user to continue without the message. You still need to remove the event to reliably turn it on and off:

// Turn it on - assign the function that returns the string

window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely

window.onbeforeunload = null;

Original answer (worked in 2009)

To turn it on:

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

To turn it off:

window.onbeforeunload = null;

Bear in mind that this isn't a normal event - you can't bind to it in the standard way.

To check for values? That depends on your validation framework.

In jQuery this could be something like (very basic example):

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

Originally

Stopping page navigation and wait for user to confirm

3 Answers3