I want to add an additional function to a basic plain javascript exit page popup. Basically, I have my page set up so when a user tries to exit the page a message will appear saying "do you really want to leave" with the options "OK" and "Cancel". I want to set it up so when the user clicks OK it will redirect them to another website. I don't have a lot of experience coding so I'm not sure if this is possible. Here is the code that I'm using:
<h1 id="home">Warn before leaving the page</h1>
<script>
// Warning before leaving the page (back button, or outgoinglink)
window.onbeforeunload = function() {
return "Do you really want to leave?";
//if we return nothing here (just calling return;) then there will be no pop-up question at all
//return;
};
</script>
<a href="http://google.com/</a>
Any help will be appreciated, Thanks!
This is something you should avoid doing because it is bad user experience. Also this is a repeat of this post.
Related
so I'm making a drawing app. the problem is, when the user accidentally closes or refreshes the page, all the drawings will be lost. So I made a confirmation box that will confirm if the user really wants to close the page.
I have tried like this:
if (window.onbeforeunload == true ) {
confirm("Change are still not saved. Are you sure?")
}
But it doesn't work. Then what is the best solution to solve this problem?
onbeforeunload is a function which is called when leaving the page. So you have to define it.
window.onbeforeunload = function()
{
return "Change are still not saved. Are you sure?";
};
Hey guys I am trying my best to figure it out how to remove the Javascript prompt/confirm that says "Do you want to leave this site?" like this:
https://prnt.sc/famast
Basically what's happening here is that when a modal got opened and the user click on "YES" it will redirect to a page. But I don't want the JavaScript confirmation but just redirect it to that page.
Any idea if you know some scripts that could make it happen?
Please help!
As other said above me, you can do it with onbeforeunload:
window.onbeforeunload = function() {
return '';
// The browser shows a pre-defined message so you don't have to write your own
}
You can also use addEventListener, in this way:
window.addEventListener('beforeunload', function() {
return '';
});
See an example (Link updated)
Can someone help me with a JavaScript code to show an exit popup when someone clicks on tab "x" to leave that specific page/or website only. (not asking about intent exit pop up). I need to take the userfeedback on my order form to find out if he is happy with the prices. I want to integrate it with contact form 7. Using wordpress. Asking it after 5 hours of search around web.
Thorough help is appreciated.
You can use the beforeunload event (https://developer.mozilla.org/fr/docs/Web/Events/beforeunload) :
$(window).on('beforeunload', function () {
alert('Exit site')
});
You can use the beforeunload event to show a form
$(window).on('beforeunload', function () {
$('.feedbackform').show();
});
on close of the feedbackform you close the page
I have the following code:
<html>
<head>
</head>
<body>
<form method="post" action="something.php" name="myForm">
<input type="submit" name="homepage" value="Please Work" id="homepage">
</form>
<script>
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = function () {
if(!clicked) {
return 'If you resubmit this page, progress will be lost.';
}
};
</script>
</body>
</html>
This code pops a confirmation box when the user leaves the page (Back or Refresh Browser Button) but not when a button inside the form is clicked.
QUESTION
How can I redirect to a different page when the user clicks the "Leave this Page" button of the confirmation box? I tried different methods but it does not work. I'm using Google Chrome.
Any help is very much appreciated. Thank you in advance. :)
EDIT
So I got some codes that actually works but it does the opposite. When I click the "Leave this Page" it stays and when I click "Stay on this Page" it redirects.
var onUnloadClick = 0;
function redirectTimer() {
setInterval(function(){window.location = "sample exam.php"},10);
}
var btn = document.getElementById('homepage'),
clicked = false;
btn.addEventListener('click', function () {
clicked = true;
});
window.onbeforeunload = onbeforeunload_Handler;
function onbeforeunload_Handler() {
if(!clicked) {
if(onUnloadClick == 0) {
redirectTimer();
return 'If you resubmit this page, progress will be lost.';
}
}
};
QUESTION
How will I modify this code and do the opposite function?
You can't mess with the browsers processes. If you click back, it will go back. If you click refresh, it will refresh the page. The reason they're in there is because they have their functions. You can try different approach in doing what you want but I don't think this one is possible.
I dont think that its possible. Check out answer here:
Intercept selection in window.onbeforeunload dialog
There is not defined way to intercept the onbeforeunload event. Further reference can be seen here:
Intercept selection in window.onbeforeunload dialog
When onbeforeunload event is kick started the user has already selected where he\she wants to go; it would not make sense if the browser allows javascript on a webpage to override the actions of the user.
Hence there should not be anyway for you take the user to some other location other than where the user wants to go.
Updated Answer to the Updated Questions:
Its not possible to do what you are trying to do. The reason you get redirected when you choose "stay on this page" and not otherwise is because your javascript function to redirect comes into effect only why you stay on the page. When you choose to leave the page the browser will no longer execute any of your code. Because the browser does not want you to override the choice fo the user.
My recommendation:
Rethink what you want. You want to redirect the user to a different page when the user is trying to go somewhere else. I really don't think that is the correct.
What is your ultimate goal? If you let me know that.. probably I can provide you with a better solution.
I have a client that just got the Apple Magic Mouse. We built a recipe website and she get very upset when she is inputting all the information for the recipe, then goes for her new mouse and accidentally scrolls to the right and it will do a Back Browse and all her info is lost. So she wants to warning/pop up to prevent this from happening on that page.
Any suggestions or point me to some JS that does this?
This is a basic 'warn before leave' script. When the user presses a key in the textarea, the user will be notified if (s)he is about to leave the page:
<script type="text/javascript">
var changes = false;
window.onbeforeunload = function(){
if(changes){
return "You're about to leave this page.";
}
};
</script>
<textarea onkeypress="window.changes=true">recipe here</textarea>
Alternatively, you can store the contents of the textfield in a variable when the page loads and compare it afterwards. This will take away some confusion when the visitor just press the arrow keys in the textarea without actually modifying it.
So she wants to warning/pop up to prevent this from happening on that page.
You can hook into the onBeforeUnload event of your browser and then show a confirmation message.