点击Cancel时confirm()仍允许表单提交的技术问题求助

我来帮你搞定这个问题！你遇到的核心问题是没有把确认框的结果返回给表单的onsubmit事件，导致浏览器不管用户点确定还是取消，都会执行默认的提交行为。

问题分析 #

你的next()函数确实返回了confirm的结果，但在onsubmit属性里只写了next()，并没有把这个返回值传递给事件处理逻辑。浏览器会忽略这个返回值，直接走默认提交流程。另外你的模板变量{{$foo}还少了一个闭合的大括号，这也会导致潜在的语法错误。

修正后的代码 #

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里改成return next()：这样confirm返回的true/false会直接传递给事件，返回false时浏览器会阻止表单提交，返回true时才会继续提交。
• 修复模板变量的语法：把{{$foo}改成{{$foo}}，避免解析错误。

原理补充 #

表单的onsubmit事件遵循一个规则：如果事件处理函数返回false，就会阻止默认的提交行为；如果返回true或者没有明确返回值，浏览器就会执行默认的提交操作。所以必须通过return把确认框的结果传递给这个事件，才能实现“确认后提交，取消则不提交”的效果。

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