html - 当我单击表单中的按钮时提交表单。如何避免这种情况？

Question

我使用 twitter-boostrap，我想使用 these radio-buttons以我的形式。问题是当我点击这些按钮中的任何一个时，表单会立即提交。如何避免这种情况？我只想使用默认按钮，例如单选按钮。

来自:

<%= form_for @product do |f| %>
    <div class="control-group">
      <%= f.label :type, :class => 'control-label' %>

      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn">Button_1</button>
          <button class="btn">Button_2</button>
        </div>
      </div>

    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
<% end %>

JavaScript:

// application.js
$('.tabs').button();

Answer 1

从精HTML5 specification :

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".

还有一个 <button type="submit"> 提交表单而不是表现得像一个简单的 <button type="button"> push-button .

HTML4 spec说同样的话:

type = submit|button|reset [CI]
This attribute declares the type of the button. Possible values:

• submit: Creates a submit button. This is the default value.
• reset: Creates a reset button.
• button: Creates a push button.

所以你的 <button>元素:

<button class="btn">Button_1</button>
<button class="btn">Button_2</button>

与这些相同(在兼容的浏览器中):

<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>

只要您点击其中一个按钮，您就会提交表单。

解决方案是使用普通按钮:

<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>

某些版本的 IE 默认为 type="button"不管标准怎么说。您应该始终指定 type使用 <button> 时的属性只是为了确保您会得到预期的行为。