使用 JS 取消表单提交

Question

为了争论起见，假设这是我的代码。

function the_delete() { 

if(confirm('Delete your Account')){
alert("Account Deleted, Redirecting to homepage");
} else {
//Stop the submit
}

}

<form method="post" action="my-account/settings/delete-account">
 <button class="btn" onclick="the_delete()">Delete Account</button>
     </form>

如何在用户按下取消时停止提交表单？

谢谢

Answer 1

您需要 return 来自 onclick 函数的 true 或 false 值。

这意味着你需要同时修改onclick函数和the_delete函数。

function the_delete() {

  if (confirm('Delete your Account')) {
    alert("Account Deleted, Redirecting to homepage");
    return true;
  } else {
    return false;
  }

}

<form method="post" action="my-account/settings/delete-account">
  <button class="btn" onclick="return the_delete()">Delete Account</button>
</form>

现代 JavaScript（针对比 Internet Explorer 8 更现代的浏览器）会将事件处理程序与 JavaScript 绑定并改为操纵事件对象。

function the_delete(event) {
  if (confirm('Delete your Account')) {
    alert("Account Deleted, Redirecting to homepage");
  } else {
    event.preventDefault()
  }
}

document.querySelector("form").addEventListener("submit", the_delete);

<form method="post" action="my-account/settings/delete-account">
  <button class="btn">Delete Account</button>
</form>

使用 JS 取消表单提交

Cancel a form submission with JS

html

javascript

submit