How can I display alert box to users unless they click a specific button

Question

I have set up a page with a form that users can make changes to using PHP. When they try to navigate away from the page or refresh, an alert box appears using JS. However when they click the Save button the alert box still appears.

Is there any way I can stop the alert box appearing when the user clicks on the save button?

here is my JS:

 var needToConfirm = true; $('#save').click(function(){ var needToConfirm = false; }) if (needToConfirm == true) window.onbeforeunload = confirmExit; function confirmExit() { 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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Here is my HTML (just the button): --> <input type="submit" id="save" /> <input type="hidden" id="save" name="submitted" value="TRUE" /> 

Answer 1

If I understand correctly, you don't want to show the confirmation dialog when someone clicks the save button right? Why not just deregister the onbeforeunload method in that click handler like so:

window.onbeforeunload = confirmExit; //By default assign the confirmExit

//If user clicks on save, just set it to null.
$('#save').click function(){
 window.onbeforeunload = null;
}

This way, you don't need to maintain a separate variable called needToConfirm . Also, try to understand the way javascript executes your code. It does it line by line. So, your needToConfirm defined inside the click handler right now gets set to false when the user clicks save. But even before that callback is called, you already have bound the onbeforeunload event as the default value of needToConfirm is true .

Try to also keep in mind the scoping of variables in javascript. If you redefine variable needToConfirm inside a click handler it would not necessarily access the "global" variable you intend to share across different functions. And ofcourse, like other people pointed out, don't use the same id for different HTML elements. It is not supposed to be used like that.

Answer 2

First of all, you are not executing your conditional code inside the if statement. It is out of it, fix that and try again. If it still doesn't work then try the following:

The page get refreshed before the $("#save").click() returns anything (in this case, needToConfirm = false . Therefore the alert box appears as usual. You have to modify your html as follows:

<input type="button" id="save" />

and use javascript to actually submit the form... You can do that as follows:

$("#save").click(function() { var needToConfirm = false; $("#idOfForm").submit(); return false; }

Also, change ID of one of the buttons as 2 elements can never have the same ID... or use class instead!