提交表单前使用确认对话框的正确方法

Question

what is the correct way of using the confirm dialog box before the submit form? I see two problem in my implementation, but can´t find solution.
1)I show a dialog box while submitting. I am using a global variable "val" in ShowConfirmation, this is not visible outside the ShowConfirmation function. If I use debugger, "val" is undefined in ".Submit" function.
2)Because i have "e.preventDefault" the form is not submitted. Forcing "submit" in function ShowConfirmation does not submit the form.

<input type="submit" class="button" value="CONFIRM" onclick="Confirm())">
<Script>
var val;
$("#form").submit(function(e)
{
  // confirmation popup
  e.preventDefault();

  if (val==true)
  {
  // Do something
  }

})

ShowConfirmation(val) {
var r = confirm("Press a button");
if (r == true) {
  console.log("you pressed ok");
  .....
  val=true;
  $("#form").submit();
}
else {
  console.log("you pressed cancel");
  }
}
Confirm() {
...
...
ShowConfirmation(val);
}
</Script>

Answer 1

Hope the following code helps:

 $("#form").submit(function() { if (confirm("Press a button")) { // Do something console.log("you pressed ok"); $(this).off("submit").submit(); } else { console.log("you pressed cancel"); } return false; }) 

Answer 2

If you listen to the submit and then call it back (using $(this).submit()) you will join an endless loop which can be stopped just by not pressing ok on the confirm box.

Instead of all your functions, the situation is actually very easy.

HTML (Example):

<form id="form">
    <input type="submit" value="confirm" />
</form>

Javascript:

$('#form').click(function (e) {
   e.preventDefault();
    confirm("Are you sure?") ? $(this).submit() : alert("ok..");
});

Instead of using variables and stuff like that, we just want to check if the user confirmed or not, therefore we are using the comfortable ternary operator:

confirm("Are you sure?") ? $(this).submit() : alert("ok..");

if the user confirms, it will submit the form, else it will alert ok. If you have two functions, just declare them correctly , you are missing the function before your function names.

fiddle: http://jsfiddle.net/1jkyuez8/1/