javascript - 使用 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

您需要从 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 绑定(bind)并操作事件对象。

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>