JavaScript before leaving the page

Question

I want to make a confirmation before user leaving the page. If he says ok then it would redirect to new page or cancel to leave. I tried to make it with onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

But it confirm after page already closed? How to do it properly?

It would be even better if someone shows how to do it with jQuery?

Answer 1

onunload (or onbeforeunload ) cannot redirect the user to another page. This is for security reasons.

If you want to show a prompt before the user leaves the page, use onbeforeunload :

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Or with jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

This will just ask the user if they want to leave the page or not, you cannot redirect them if they select to stay on the page. If they select to leave, the browser will go where they told it to go.

You can use onunload to do stuff before the page is unloaded, but you cannot redirect from there (Chrome 14+ blocks alerts inside onunload ):

window.onunload = function() {
    alert('Bye.');
}

Or with jQuery:

$(window).unload(function(){
  alert('Bye.');
});

Answer 2

This code when you also detect form state changed or not.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. I guess this explain is enough:)

Answer 3

This will alert on leaving current page

<script type='text/javascript'>
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; 

</script>

Answer 4

This what I did to show the confirmation message just when I have unsaved data

window.onbeforeunload = function() {
  if (isDirty) {
    return 'There is unsaved data.';
  }
  return undefined;
}

returning undefined will disable the confirmation

Note: returning null will not work with IE

Also you can use undefined to disable the confirmation

window.onbeforeunload = undefined;

Answer 5

In order to have a popop with Chrome 14+, you need to do the following:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

The user will be asked if he want to stay or leave.

Answer 6

You can use the following one-liner to always ask the user before leaving the page.

window.onbeforeunload = s => "";

To ask the user when something on the page has been modified, see this answer .

Answer 7

Most of the solutions here did not work for me so I used the one found here

I also added a variable to allow the confirm box or not

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

Answer 8

Normally you want to show this message, when the user has made changes in a form, but they are not saved.

Take this approach to show a message, only when the user has changed something

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

Answer 9

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

Answer 10

Just a bit more helpful, enable and disable

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

JavaScript before leaving the page

Question

10 answers

solution1
373 2011-08-16 14:59:10

solution2
37 2014-01-11 10:09:56

solution3
21 2014-08-07 12:06:09

solution4
18 2017-01-04 23:58:58

solution5
12 2013-06-06 19:45:02

solution6
8 2016-11-08 00:04:47

solution7
5 2020-01-28 05:42:55

solution8
4 2018-12-06 19:13:54

solution9
3 2018-01-24 16:36:09

solution10
0 2018-02-20 11:20:18

JavaScript before leaving the page

Question

10 answers

solution1 373 2011-08-16 14:59:10

solution2 37 2014-01-11 10:09:56

solution3 21 2014-08-07 12:06:09

solution4 18 2017-01-04 23:58:58

solution5 12 2013-06-06 19:45:02

solution6 8 2016-11-08 00:04:47

solution7 5 2020-01-28 05:42:55

solution8 4 2018-12-06 19:13:54

solution9 3 2018-01-24 16:36:09

solution10 0 2018-02-20 11:20:18

solution1
373 2011-08-16 14:59:10

solution2
37 2014-01-11 10:09:56

solution3
21 2014-08-07 12:06:09

solution4
18 2017-01-04 23:58:58

solution5
12 2013-06-06 19:45:02

solution6
8 2016-11-08 00:04:47

solution7
5 2020-01-28 05:42:55

solution8
4 2018-12-06 19:13:54

solution9
3 2018-01-24 16:36:09

solution10
0 2018-02-20 11:20:18