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:

Answer 1

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.