使用JavaScript与HTML实现Confirm确认对话框提交异常问题求助

• submit按钮的默认行为是触发表单提交，你当前的逻辑没有阻止用户点击「否」时的默认提交动作
• confirmAction 函数没有返回布尔值控制提交逻辑，onclick 事件绑定也没有接收返回值，无论用户在确认框选什么，表单都会照常提交。

方案1：最小改动（修改现有绑定逻辑） #

1. 修改submit按钮的onclick绑定，增加return接收函数返回值
2. 调整confirmAction函数，根据用户选择返回布尔值，选择「否」时返回false阻止表单提交

修改后的HTML代码：

<form method="POST" action="/delete/prop" >
<p class="card-text h6"> <b>Typology: </b> <%= book.typology %> </p>
<input type="hidden" name="id5" value=<%= book.id %> />
<input type="hidden" name="prop" value= "typology" />

<!-- 新增return接收函数返回值 -->
<input type="submit" value="Yes" class="button btn btn-danger" onclick="return confirmAction()" />
</form>

修改后的JavaScript代码：

<script type="text/javascript">
  function confirmAction() {
    let isConfirm = confirm("Are you sure to execute this action?");
    if (isConfirm) {
      alert("Action successfully executed");
      return true; // 确认时返回true，放行表单提交
    } else {
      alert("Action cancelled");
      return false; // 取消时返回false，阻止表单提交
    }
  }
</script>

方案2：更稳妥的表单submit事件监听（推荐） #

直接绑定表单的提交事件，避免按钮绑定遗漏的问题，代码更易维护：

<!-- 给表单新增id属性 -->
<form method="POST" action="/delete/prop" id="deleteForm">
<p class="card-text h6"> <b>Typology: </b> <%= book.typology %> </p>
<input type="hidden" name="id5" value=<%= book.id %> />
<input type="hidden" name="prop" value= "typology" />

<input type="submit" value="Yes" class="button btn btn-danger" />
</form>

<script type="text/javascript">
  document.querySelector('#deleteForm').addEventListener('submit', function(e) {
    let isConfirm = confirm("Are you sure to execute this action?");
    if (!isConfirm) {
      e.preventDefault(); // 直接阻止表单默认提交行为
      alert("Action cancelled");
    } else {
      alert("Action successfully executed");
    }
  })
</script>

内容的提问来源于stack exchange，提问作者Arturo