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

Question

在提交表单之前使用确认对话框的正确方法是什么？我在实现中看到两个问题，但找不到解决方案。
1）我在提交时显示一个对话框。我在 ShowConfirmation 中使用了一个全局变量“val”，这在 ShowConfirmation 函数之外是不可见的。如果我使用调试器，“.Submit”函数中的“val”未定义。
2）因为我有“e.preventDefault”，所以没有提交表单。在函数 ShowConfirmation 中强制“提交”不会提交表单。

<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

希望以下代码有所帮助：

$("#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

如果您收听提交然后将其回调（使用 $(this).submit()），您将加入一个无限循环，只需不按确认框上的确定即可停止该循环。

代替你所有的功能，情况其实很简单。

HTML（示例）：

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

Javascript：

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

我们只是想检查用户是否确认，而不是使用变量和类似的东西，因此我们使用舒适的三元运算符：

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

如果用户确认，它将提交表单，否则它会提示 ok。如果您有两个函数，只需正确声明它们，您的函数名称前缺少 函数。

小提琴：http://jsfiddle.net/1jkyuez8/1/