阻止模态按钮提交它所在的表单

Posted 2023-05-08

【中文标题】阻止模态按钮提交它所在的表单

【英文标题】：Prevent a modal button to submit the form it is in

【发布时间】：2015-11-14 18:44:54

【问题描述】：

问题：

我在表单中有 Bootstrap 模式按钮，可以打开模式以选择数据（用户和成本类型），这些按钮并不意味着提交主表单。

当我按下模式按钮时，模式仅在其他必填字段为空时打开。 当用户填写必填字段时，表单提交（这不是我所期望的）。

尝试打开模式时如何防止表单提交？

e.preventDefault(); 不会阻止表单提交。

一个 jsfiddle 可以在这里找到：http://jsfiddle.net/cagy79/193thboq/

有什么想法吗？

【问题讨论】：

您的 JSFiddle 充满了错误。看看控制台。

是的，我知道，我第一次使用它时，我花了 30 分钟才让这个小提琴工作一点点 :)

【参考方案1】：

只需在您的 html 中添加输入类型的“按钮”即可。那么你就不需要你的 dontSubmit 类了。

<button data-toggle="modal" data-target="#modalAddStaff" type="button" >

原因是：在 HTML5 中，任何没有类型的按钮都默认为“提交”类型。

希望有帮助！