单击按钮时如何防止表单提交？ [复制]

Posted 2023-02-22

【中文标题】单击按钮时如何防止表单提交？ [复制]

【英文标题】：How to prevent form submit when a button clicked? [duplicate]

【发布时间】：2014-08-15 12:20:44

【问题描述】：

我有一个包含按钮的表单，单击按钮时会提交表单，以及如何防止这种情况发生。例如，我只想在单击按钮时显示“警报”。并将按钮放在表单之外不是我的选择。

顺便说一句，我使用引导框架。

    <form class="form-inline" role="form" id="form-area">
        <input type="hidden" name="key" value="dept-area">
        <div class="form-group">
            <input type="text" class="form-control" name="data" placeholder="">
        </div>

        <button class="btn btn-default" id="btn-area">test</button>
    </form>

【参考方案1】：

我不同意 javascript 的答案。他们工作，但他们没有解决问题的原因。

由于<button> 元素的默认类型为submit，因此正在提交表单（请参阅spec here）。

您可以通过将type="button" 放入 html 中来解决此问题，如下所示：

 <button type="button" class="btn btn-default" id="btn-area">

【参考方案2】：

使用event.preventDefault();

单击的锚点不会将浏览器带到新的 URL。我们可以使用 event.isDefaultPrevented() 来确定该方法是否已被由该事件触发的事件处理程序调用。

 $("#btn-area").click( function(event) 


 event.preventDefault();

     alert("hello ");

); 

http://jsfiddle.net/BL3Jk/

【参考方案3】：

你可以试试这个：

$('#form-area').submit(function (event) 
    event.preventDefault();
);

【参考方案4】：

你可以像这样使用jquery

$("#btn-area").click(function(event)
alert("Your alert");
event.preventDefault();
);

【讨论】：

请查看更新的答案