单击表单中的按钮时会提交表单.怎么避免这个？

Question

我使用twitter-boostrap,我想在我的表单中使用这些单选按钮.问题是,当我点击任何这些按钮时,表格立即提交.怎么避免这个？我只想使用像单选按钮这样的默认按钮.

从:

<%= 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规范:

甲按钮没有元素类型指定属性表示相同的事情与设置为它的类型属性的按钮元件"提交".

并且<button type="submit">提交表单而不是像简单<button type="button">的按钮那样表现.

在HTML4规范说同样的事情:

type = submit | button | reset [CI]
此属性声明按钮的类型.可能的值:

• submit:创建一个提交按钮.这是默认值.
• reset:创建重置按钮.
• 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>

type="button"尽管标准说的是IE的某些版本默认使用.type在使用<button>just 时应始终指定属性,以确保您将获得您期望的行为.