javascript - 在 'Cancel' 上 confirm() 仍然允许表单提交

Question

function next() {
  return confirm('Are you sure you want to Foo');
}

<form method="GET" action="/foo" onsubmit="next()">
  <input type="hidden" name="delete" value={{$foo} />
  <button class="btn btn-warning" type="submit"> Foo</button>
</form>

我正在尝试为用户提供验证他们是否要提交表单的选项。目前上面的代码显示弹出确认框，但无论是否单击“确定”或“取消”，表单都会提交。

我对“confirm()”的理解是，如果单击“取消”，表单提交将停止。

Confirm() 是如何工作的，如何最好地实现？

Answer 1

您需要在 HTML 中的 next() 之前加上一个 return:

function next() {
  return confirm('Are you sure you want to Foo');
}

<form method="GET" action="/foo" onsubmit="return next()">
  <input type="hidden" name="delete" value={{$foo} />
  <button class="btn btn-warning" type="submit"> Foo</button>
</form>

要停止提交，onsubmit 处理程序需要返回 false，您错过了。 confirm() 在模式被关闭时返回 false。