Develop Reference

how to prevent window back button and close tab with javascript

now im doing laravel project. i want to implement javascript code only for preventing the back button and close tab window. i read the article that we can use onbeforeunload(). but this code not suitable with me. because the warning message will display when i want to go to another link menu on my site..
here is my code
window.onbeforeunload = function() {
return "Do you really want to leave?";
};
above code still have problem to me :
i must click at list 1 time on the side. then click close tab, so the pop up will display. if i dont click, the pop up not display and directly close the tab.
im using opera browser but the custom message not display same as what i type. it display "Changes you made may not be saved.". How do i could display the sentence as same as i type?
is there any other code that just prevent only for back button and close the tab? so went i want to navigate to other link menu on my site, the warning message not display.
please help

//you should $event.return = "";
window.addEventListener("beforeunload", function ($event) {
return $event.returnValue = "";
})

Prevent Exit Pop Up Loading After Form Submit

My aim is to have a exit pop up which triggers the window.onbeforeunload if somebody tries to close the current tab or browser. But after they complete a sign up form to opt in to my e-mail list and redirect to my "Thank you page URL", I do not want the exit pop up to show.
I am using a page builder, so the code is not written by myself.
This is the following script I am using:
window.onbeforeunload = function(e) {
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
};
</script>
As for my form, because after the user enters their name and clicks submit, they redirect to a URL and the exit pop is triggering once the redirect begins. I only want the pop to show if they try to leave opting in then disable this after they take that action.
I notice an a class tag with the href="submit-form" My form is also contained in the form target tag if that helps.
How do I implement a script which disables the exit pop up after redirecting to a new page in a HTML sign up form?
Thank you for any insight.

You could achieve that by using if-else statements and setting the event to null if a form is being submitted.
Here is an example
`
window.onbeforeunload = function(e) {
e.preventDefault()
if($('form').submit(){
return null;
}
else{
return 'Are you sure you want to leave this page? You will lose any unsaved data.';
}
}
`
PS: I have not tested it but it should work

How to stay fancy box popup sometime after click on the browser back button

I want to show a popup when user click on the close button or back button in browser in checkout page of my site. I have implemented the following code for that ........
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
//window.history.forward();
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
Now everything is working fine. But the final requirement is when user click on the back browser button from the checkout page, the fancy box popup appear and it will stay ~40 seconds then the page redirect to back.
I can't solve this problem. How do I stay the popup when already the page redirecting to click on the back button on browser. Is it possible? Please help me

Have you tried (#user1721135)
Jquery when back button is pressed
I understand is a different event but maybe can help :S.... Also: (#IMRAN ABDUL GHANI) Solution to browser back button click event handling

Alert user for unsaved changes in page within panels using jquery

I have a situation here, i need to stop the user if user has left some unsaved changes on the page.
I got some information over the internet for moving from current page to other page like
var warnMessage= "You have unsaved changes";
$('input:not(:button,:submit),textarea,select').change(function () {
window.onbeforeunload = function () {
if (warnMessage != null) return warnMessage;
};
});
$('input:submit').click(function(e) {
warnMessage = null;
});
This works fine when we are closing tab or URL is getting changed.
I have panels on my page as like three different panels;each with a Submit, Cancel and Reset. Now, i need to alert the user when it happens to open a panel; last panel has unsaved changes then user should be alerted
If he/she has some unsaved changes on the panel, submit/reset/cancel button is clicked then also it should confirm by the user.
Is this possible?

Detect if javascript dialog button clicked and redirect

Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David

If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.