使用Bootstrap HTML点击按钮而不提交表单

Question

这是我的代码。

        <form class="form-horizontal">

          <div class="control-group">
            <div class="controls">
              <button onclick="javascript:add_user_group(2);" class="btn">add</button>
            </div>
          </div>

        <table id="users-table" class="table table-striped" >
          <thead>
            <tr>
              <th>User Name</th>
              <th>Delete</th>            
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>

      </form>             

当点击添加按钮时，我希望能够向表格中添加新行，但似乎点击添加按钮会触发表单的提交。这只是一个带有元素的按钮，不是吗？

 type=submit

提交表单。或者，表单中的任何按钮都会触发表单提交？

- icn

---

我不熟悉bootstrap，但如果在添加行后使add_user_group()函数返回false会发生什么？ - Anthony Clark

@AnthonyClark 哇，它可以工作了（而不是触发表单提交）！ - icn

Answer 1

不需要使用JavaScript。只需将type="button"设置为覆盖隐式的type="submit"。 这也可以在HTML5规范中找到，如此处所述：https://dev59.com/1Wkw5IYBdhLWcg3wyNkW#9643866。

- Maurice Schleußinger

---

这应该是真正的解决方案。另一个答案没有避免在表单字段中按回车键提交表单。 - Michael Walter

此解决方案仅提供了一种输入样式的方式，并且提供了有限的样式选项。 - Ian Jowett

Answer 2

在被称为 onclick 的函数中返回 false 将阻止表单提交。 :)

onclick="javascript:add_user_group(2);return false;"

- Anthony Clark

---

使用按钮标签的type属性设置为button，例如：<button type="button" onclick="Javascript:myFunction()">另一个任务</button>。 - RAHINUR RAHMAN