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

Question

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

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

    <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默认为（请参阅此处的规范）。

您可以通过type="button"像这样输入 html 来解决这个问题：

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