Develop Reference

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 have dialogue box appear but without the "Are you sure you want to leave this page?" message in it

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.

Windows alert javascript with redirect function

This is my script
<script>
function myAlert() {
alert("You have changed your username, you will be logged out in order changes to be applied");
}
</script>
and this is my button
<input type="submit" value="Save" name="btnPass" class="button" onclick="myAlert()";/>
I wanted to know if there's a way how to add a redirect script when the "okay" button at the alert is click. how can i add it on my script? how can i add it on my script? thanks!

Use confirm instead of alert
The Window.confirm() method displays a modal dialog with an optional message and two buttons, OK and Cancel.
function myAlert() {
var confirmed = confirm("You have changed your username, you will be logged out in order changes to be applied");
// If OK button is clicked
if (confirmed) {
window.location.href = 'google.com';
}
return false; // To stop form from submitting
}

#Tushar is correct on using the confirm dialog. Below is a modified version of his answer sure to work
function myAlert() {
var confirmed = confirm("You have changed your username, you will be logged out in order changes to be applied");
// If OK button is clicked
if (confirmed == true) {
window.open("path-to-logout script","_self");
}
}

How to include comfirm box in Php

I have created a Joomla article. I have installed sourcerer Joomla extension to use JavaScript and php. I am working on course purchase site in this user purchase course from owner and credits are deducted on purchasing of course. We are using a confirm box so that when a user click on "Cancel" button then it return to course page and when user click on "OK" button, then a php code is executed and course is purchased and credits are deducted. It works fine when I click on the OK button. When I click on cancel button, it is deducted credits also. I don't want to deduct credits on click of cancel.
I am using this JavaScript code:
var answer = confirm ("You are about to purchase this course. Click Continue to complete the purchase, or CANCEL to return to the CE page.");
if(!answer)
{
window.location="index.php";
}

Javascript:
function confirm_delete() {
return confirm('are you sure?');
}
Use onclick in the button
onclick='return confirm_delete()'
When the user clicks OK the php code gets excecuted but when clicked on Cancel nothing happends.

Why don't you use onclick?
onclick="return confirm('Are you sure you want to delete?');"

The best way to do this is by onclick method as follows:
oncllick ='return confirm()'
function confirm()
{
return confirm('Are you sure to continue?');
}
when user click ok then code excecuted and when click on cancel button it remains on that page only

Show progess bar dialog when submit

I'd like to show a popup jquery styled if possible on every postback, for example saying Loading... I don't know how to accomplish that nor which tecnologyes use. I want to put the code on a super class so that I need to code only once. In principle I'd like that when I press the submit button, the page hides itself.
Hope you help me.
Edited:
It should be something like that. I have a page, I open a jquery dialog with an iframe on it and with a submit button. When I submit the form the dialog with the form must hide and a new dialog saying loading... have to appear; when the operations finishes this dialog must hides.

You can do that using the onsubmit trigger on the form of you page as:
<form id="form1" runat="server" onsubmit="return disableForm(this);">
...
</form>
an on javascript what I do is that on the first submit click I let the submit, and close/open the dialogs that I like. If the user clicks two times the submit I show him a message and stop the second submit.
var submitted = false;
function disableForm(theform) {
if (true == submitted) {
alert("form already submitted... please wait...");
return false;
}
else {
// here you close the dialog, open an other
submitted = true;
return true;
}
}
I can not write how to close the dialog that you open since you do not have give any clue/code about it, but I think it will be easy.

Assuming you are using updatepanels. You will need handlers like this one and an image "LoadingImage"
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
function beginRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "visible";
//Do something when call begins.
}
function endRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "hidden";
}
</script>
What it does is it shows an image when ajax call starts and hide it when it completes. You can use an animated gif for your purpose.