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
Related
I follow How to clear a textbox using javascript but my scenario is little change. I have a login button and when user click on login a pop-up window is open. He fill the textbox and for some reason he go back to main page. When he again come to login popup window he previous value is not cleared. May be this is because the page is not loaded. And I do not want to load page again. I want to use JQuery/JavaScript to remove the entered text. I has idea that I write code inside Close button but I don't know how to clear the textboxes. Please help.
Here is the code, scenario is that I used popup for login and sign up. In login popup there is link "Don't have login Id" when user click on it the sign up pop up with form is open.
Don't have Login Id
And the JavaScript method is
<script type="text/javascript">
function function_deletePreviousData(){
document.getElementById("signUp").value = "";
}
</script>
But nothing happened. I think this is because I don't give element id, I just give id of element which I used to land on sign up pop up form. Any idea for clear all form without accessing all elements and give it null value.
Instead of including code in close button click event, we should write code in login button click.This is one of my suggestion.
Try this once:
Javascript:
<script type="text/javascript">
function LoginButtonClick() {
document.getElementById`("TextBox_Id").value = "";
}
</script>
JQuery:
jQuery("#LoginButton_Id").Click( function()
{
$('#TextBox_Id').val("");
} );
Finally I find the method in JQuery to reset all fields. Just Trigger reset.
$('#form').trigger("reset");
Thanks all for help.
I have a page that you are able to save notes.
If a user writes some notes without saving it and tries to navigate away, the dialogue box appears alerting the user that the changes will be lost unless you save it.
The message is as follows:
"You have unsaved changes in the Notes section. Please save your changes or they will be lost. Are you sure you want to leave this page?"
This scenario is fine. However there is a submit buttons on the page (that submits a form), and if the user clicks on the submit button the dialogue box appears with that same message.
In this scenario I want the same message to appear but without the "Are you sure you want to leave this page?". I don't seem to have any control over it. When the submit button is clicked, the same page appears after the form is submitted, which is why I don't want that part of the message to appear.
How do I remove the "Are you sure you want to leave this page?" part of the message?
window.onbeforeunload = function (e) {
var lastClickedElement = document.activeElement;
var submitButtonOne = document.getElementById("submitButton1");
var submitButtonTwo = document.getElementById("submitButton2");
if (!lastClickedElement.isEqualNode(submitButtonOne)) {
if (lastClickedElement.isEqualNode(submitButtonTwo)) {
if ($('#notesTextBox').val() !== currentText) {
return 'I want this dialogue box not to contain "Are you sure you want to leave this page?"';
}
}
if ($('#notesTextBox').val() !== currentText) {
return 'You have unsaved changes in the Notes section. Please save your changes or they will be lost.';
}
}
return null;
};
Explanation of code above - When the window.onbeforeunload is fired and the user is actually trying to navigate away from the page I want the message to appear. When the window.onbeforeunload is fired and if submitButton1 was clicked, I dont want it to do anything. When the window.onbeforeunload is fired and submitButton2 was clicked I want it display the message without the "Are you sure you want to leave this page?" part.
i am working on asp.net site that contains say three pages
page1.aspx
page2.aspx and page3.aspx
I want if user redirects from page1, alert box asking for confirmation should come. For this i have written following code
window.onbeforeunload = function () {
return 'Are you sure you want to leave?';
};
But this code run on every postback to server including pressing F5.
I want this code to run only when user redirects to any of remaining two pages
how can do this ??
try this code in javascript onload event in the pages only
if(confirm("Are you sure you want to leave?"))
{
//redirect to next page
return false
}
Handling in window.onbeforeunload may not be the straight forward way to do it since the alert message will be shown each and every time you load the page.
What you could do instead is call the confirmation js function in the from the DOM object that could possibly take the user to the different page.
For instance, let us suppose the below anchor tag takes the user to page two:
<a id="pageTwoAnchorTag" runat="server" href="~/Page2.aspx">Page 2</a>
you could add the below onclick event to get your confirmation when the user wants to go the page 2:
<a id="pageTwoAnchorTag" runat="server" onclick="return confirm('Are you sure you want to leave?')" href="~/Page2.aspx">Leave Records</a>
Only asking for confirmation in a couple of places might not be fully satisfying, since it will not trigger in all desired cases. For example, when you close the browser tab or window, your data will be lost.
I suggest to do the opposite: Register for the onbeforeunload as you already do, but include a "guard" which you disable on any action that should not trigger the confirmation (i.e. in postbacks):
window.shouldconfirm = true;
window.onbeforeunload = function () {
if (shouldconfirm) {
return 'Are you sure you want to leave?';
}
};
Register for the events that occur before a postback is executed (e.g. button click events, etc.) In those places, disable the confirmation:
window.shouldconfirm = false;
I am slightly surprised that the postbacks trigger the onbeforeunload event. I though to remember that on form posting the event is not triggered, and that a ASP.NET postback is implemented as a form post action.
With the code below i warn the user "leaving page" unless the user presses the send button.
But if the user fills in no form boxes, can i stop "leaving page" warning?
No form box is filled in + send button is pressed = no warningAny form box is filled in or the user wants to leave the page or go back= show "leaving page" warning
var warning = true;
window.onbeforeunload = function() {
if (warning) { return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
}
}
$('form').submit(function() {
window.onbeforeunload = null;
});
If you need to base the behavior on the contents of the form elements, you'll need to either check their contents or listen to changes in their contents to configure your unload behavior.
Checking the form contents is probably fastest, since you'll only need to do it in the case the user actually tries to navigate away, you won't need to manage a bunch of listeners on all the form elements (and have them firing events you no longer care about once the user has started modification).
I have an anchor on my page which looks like this: <a id="login" href="login.php"></a>
However, when a user inputs data in the page, in order that he shouldn't lose that data when going to the login page (the data can be saved without being logged in), I change it by taking out the href and adding an onclick to warn the user, as follows:
if (-code which checks for user input-){
$('#login').attr('href','javascript:void(0)');$('#login').attr('onclick','logincheck()');
}
function logincheck(){
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
$('#login').attr('onclick','');$('#login').attr('href','login.php');
}
So the user gets the warning, and now the he can click the login button again to login.
The problem I'm having that for some reason the $('#login').attr('href','login.php');makes the page redirect right away. I'm guessing this is because the we're still in the middle of the anchor click.
How can I change this href but keep the page from actually redirecting before the button is clicked again? I tried adding return false but that didn't help.
Thanks in advance!
Why not consolidate it into a single item?
$('#login').on('click',function(e){
if($(this).data('clicked')!=='true'){
e.preventDefault();
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
$(this).data('clicked','true');
}
});
This will prevent the action the first time, provide the alert, and give it the clicked data to show it has been clicked. The second time it won't meet the if condition, and continue to login.
This avoids the javascript:void(0) bit, as well as any onclick attributes ... everything is contained in your JS file.
You need e.preventDefault();
$('#login').on('click', function(e){
if(!$(this).data('clicked')){
$(this).data('clicked', true);
e.preventDefault();
alert("Going to the login page will make you lose your work. If you want to save them to a collection, please do so now. When you're ready, click the login button again.");
}
});