Question

我有一个包含按钮的表单，单击按钮时表单已提交，以及如何防止这种情况发生。例如，我只想展示一个＆＃34;警报＆＃34;单击按钮时。将按钮放在窗体外面对我来说不是一个选择。

和BTW我使用bootstrap框架。

    <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>

Answer 1

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

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

你可以通过将type="button"放在html中来解决这个问题：

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

Answer 2

使用event.preventDefault();

点击主播不会将浏览器带到新网址。我们可以使用event.isDefaultPrevented（）来确定此方法是否已被此事件触发的事件处理程序调用。

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


 event.preventDefault();

     alert("hello ");

});

http://jsfiddle.net/BL3Jk/

Answer 3

你可以试试这个：

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

Answer 4

你可以像这样使用jquery

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

如何在单击按钮时阻止表单提交？

4 个答案: