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：

未指定 type 属性的按钮元素表示与其type属性设置为“submit”的按钮元素相同的内容。

<button type="submit">提交表单而不是简单的<button type="button"> push-button。

HTML4 spec说同样的话：

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>

有些版本的IE默认为type="button"，尽管标准说明了这一点。在使用type时，您应始终指定<button>属性，以确保您获得所期望的行为。

Answer 2

您还可以通过使用type作为“按钮”的选项来直接使用rails form helper进行此操作：

<%= 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">
          <%= f.button "Button_1", type: "button", class: "btn" %>
          <%= f.button "Button_2", type: "button", class: "btn" %>
        </div>
      </div>

    </div>

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

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

2 个答案: