How to prevent "Are you sure you want to navigate away from this page?" alert on form submission?

Question

I have a simple html form with few fields in it.

I wanted to make sure that user gets an alert message when he is trying to leave the page. So I added the script on the page which will run whenever user is trying to navigate away from this page.

But I am also getting this alert message when user is trying to submit the form. I dont want this alert message when user is saving the form.

Please help.

Below is some sample code.

<html>
    <head>

    <script>
        function verifyexit() { return 'Are you sure ?'; }           window.onbeforeunload = verifyexit;
    </script>       
</head>
<body>
        Go to <a href="b.html"> another page </a> 
        <form action="c.html">
            name : <input type="text" name="name" value=""/> <br>
            email : <input type="text" name="email" value=""/> <br>
            <input type="submit" value="save"/>
        </form>
</body>

score 7 · Accepted Answer · edited May 23 '17 at 12:20

stackoverflow reference

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?";
});

With JQuery this stuff is pretty easy to do. Since you can bind to sets.

Its NOT enough to do the onbeforeunload, you want to only trigger the navigate away if someone started editing stuff.

To make this work in Chrome and Safari, you would have to do it like this

window.onbeforeunload = function (e) {
    e = e || window.event;

    var msg = "Sure you want to leave?";

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = msg;
    }

    // For Safari
    return msg;
};

This is the general rule in reference

window.onbeforeunload = function (e) {
  e = e || window.event;

  // For IE<8 and Firefox prior to version 4
  if (e) {
    e.returnValue = 'Any string';
  }

  // For Chrome, Safari, IE8+ and Opera 12+
  return 'Any string';
};

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

Note that setting a custom text is now not possible, as of 2016: https://chromestatus.com/feature/5349061406228480 — fooquency, Jan 23 '23 at 14:20

score 1 · Answer 2 · answered Jun 25 '12 at 04:59

1

Try this:

<form action="c.html" onsubmit="window.onbeforeunload=function(){}">

answered Jun 25 '12 at 04:59

Sean Johnson

5,567
2
17
22

He stated in his question that he wanted the onbeforeunload to execute in all instances EXCEPT when the form is being submitted, so this goes to his specification. – Sean Johnson Jun 25 '12 at 05:08
1

same...so deleted my ans and +1 urs. @Ashish also see this fiddle http://jsfiddle.net/FEvkK/ for another working example. – Kshitij Jun 25 '12 at 05:15
@Sean Johnson. Very strange. I could see your example working correctly. Even Kshitij's example is working properly. I just copy pasted the same stuff at my end and its still not working. I tried both your and Kshitij's versions. – ajm Jun 25 '12 at 05:16
this has a lot to do with compatability what are the tested version pleas? – shareef Jun 25 '12 at 05:32
@shareef. I am testing on IE7 – ajm Jun 25 '12 at 05:33
I believe some browsers will still pop the message if window.onbeforeunload is anything other than 'null'. An empty function qualifies as a value using this criteria. Just set window.onbeforeunload = null here and you should be good – John Culviner Jun 25 '12 at 05:39
@anything IE5-8 and FireFox1-3.5 need the `window.onbeforeunload` to be set to `null`, setting it to `function(){}` (like this answer) won't work for those older browsers. – Keith Jul 17 '13 at 08:02

score 1 · Answer 3 · edited Sep 29 '12 at 04:22

1

Try this:

$(window).bind("beforeUnload", verify);
$("form").submit(function (){
    $(window).unbind("beforeUnload");
};

edited Sep 29 '12 at 04:22

bool.dev

17,508
5
69
93

answered Sep 29 '12 at 04:13

gfreezy

98
7

score 0 · Answer 4 · answered Jun 25 '12 at 06:13

Try this: http://cfsilence.com/blog/client/index.cfm/2009/10/12/jQuery-Method-To-Prompt-A-User-To-Save-Changes-Before-Leaving-Page

I added another bit to the function:

 $('#submitButton').click(function () {
        isDirty = false;
});

Just so the form doesn't ask for validation when you want to submit it :)

I hope this helps

Note: You could also do something like $("input[type=submit]") if you don't like to depend on a common naming (else your submit button needs to be called submitButton)

How to prevent "Are you sure you want to navigate away from this page?" alert on form submission?

4 Answers4

Linked