We Keep Coding

Page exit confirmation

I am having a couple of problems with my rails app. When a user enters data and then attempts to leave the page via any means (except submit), I want it to prompt them to confirm leaving the page. This is the code I have so far and it works to an extent. If the user fills in some data then clicks 'submit' they are still prompted to confirm leaving the page. If they choose to stay on the page, and then click 'submit' again it will work as expected.
var clean;
var submitted = false;
$(function(){
clean = $("form").serialize();
});
window.onbeforeunload = function(){
$("form").submit(function() {
submitted = true;
});
var dirty = $("form").serialize();
if (dirty != clean && !submitted) {
return "You have unsaved data that will be lost if you leave the page.";
}
};
I'd also like the prompt to occur when a user attempts to follow one of the links on the page (not just closing it etc). I'm using jquery-turbolinks but it still doesn't seem to pick those events up.
Any help with either of these problems would be greatly appreciated!

Here's a possible solution:
<script type="text/javascript">
$(document).ready(function() {
var isEdit = false;
$('input').change(function() {
isEdit = true;
});
function checkIsEdit() {
if(isEdit)
return "You have modified some content. Please save this form.";
}
window.onbeforeunload = checkIsEdit;
$(document).submit(function(){
isEdit = false;
});
});
</script>
(Based on http://www.webstuffshare.com/2010/03/code-snippet-jquery-confirm-before-exit/)

How to control browser confirmation dialog on leaving page?

I know there are a lot of questions regarding this but nothing is answering me right. I want to show a confirmation dialog when user leaves the page. If the user press Cancel he will stay on page and if OK the changes that he has made will be rollback-ed by calling a method. I have done like this:
window.onbeforeunload = function () {
var r = confirm( "Do you want to leave?" );
if (r == true) {
//I will call my method
}
else {
return false;
}
};
The problem is that I am getting the browser default popup: "LeavePage / StayOnPage"
This page is asking you to confirm that you want to leave - data you
have entered may not be saved.
This message is shown in Firefox, in Chrome is a little different. I get this popup after I press OK on my first confirmation dialog.
Is there a way not to show this dialog? (the second one, that I did not create).
Or if there is any way to control this popup, does anyone know how to do that?
Thanks

Here's what I've done, modify to fit your needs:
// This default onbeforeunload event
window.onbeforeunload = function(){
return "Do you want to leave?"
}
// A jQuery event (I think), which is triggered after "onbeforeunload"
$(window).unload(function(){
//I will call my method
});
Note: it's tested to work in Google Chrome, IE8 and IE10.

This is simple. Just use
window.onbeforeunload = function(){
return '';
};
to prompt when the user reloads, and
window.close = function(){
return '';
};
to prompt when the user closes the page.
But the user have to click on the page once, or do anything on the page for the code to detect. You don't have to put anything the the return'';, because JavaScript interpreter would just ignore it.

window.onbeforeunload = function() {
if (data_needs_saving()) {
return "Do you really want to leave our brilliant application?";
} else {
return;
}
};

jQuery Exit Popup Redirect?

So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});

This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18

Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});

Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.

Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}

How to use JS/jquery to confirm when navigating away from page

I am trying to give an alert confirm dialog box when users try to navigate away...I have the following code but it doesn't quite work...
jQuery(window).unload(function() {
var yes = confirm("You're about to end your session, are you sure?");
if (yes) {
return true;
} else {
return false;
}
});
The popup comes up fine but when I click "NO", it still navigates away...
Thanks for looking...

No need for JQuery:
window.onbeforeunload = function() {
return "You're about to end your session, are you sure?";
}
Demo: http://jsfiddle.net/AlienWebguy/4fNCh/

this does not work on firefox , on IE and chrome the above works fine.
we can try on firefox
window.onbeforeunload = function() {
return confirm("You're about to end your session, are you sure?");
}
But this presents 2 dialogue boxes one with above message and one with generic message which looks dirty

JavaScript before leaving the page

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?

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.');
});

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 :)

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;

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>

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.

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.

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 = '';
}
});

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?'
}

<!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>
Click here to go to w3schools.com
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
https://www.w3schools.com/tags/ev_onbeforeunload.asp

Just a bit more helpful, enable and disable
$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');