当我单击表单中的按钮时，表单已提交。如何避免这种情况？答案

【问题标题】：Form is submitted when I click on the button in form. How to avoid this?当我单击表单中的按钮时，表单已提交。如何避免这种情况？
【发布时间】：2012-03-27 11:30:18
【问题描述】：

我使用 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();

【问题讨论】：

有点晚了，但帮助我的是Event Object's preventDefault() Method。类似$('.btn').onClick(function(evt){evt.preventDefault();});

标签： html ruby-on-rails twitter-bootstrap

【解决方案1】：

您也可以通过将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】：

来自罚款HTML5 specification：

没有指定 type 属性的 button 元素与 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"，尽管标准规定如此。在使用 <button> 时，您应该始终指定 type 属性，以确保您获得预期的行为。

【讨论】：

哇。很棒的捕获。这个得到了我。
很好，我在阻止 ROR 表单中的每个按钮提交到创建操作时遇到了很多麻烦。非常感谢您解决这个问题。
哇，浪费了这么多时间:(
@Abdul 如果它教会您始终在您的<button>s 中包含type 属性，则不会浪费时间。
@muistooshort 你是对的，并且了解我在查找资料时看到的许多其他事情

【解决方案3】：

您可以为此使用preventDefault()

$('.btn').onClick(function(e){
  e.preventDefault();
});

或者您可以在按钮标签中使用以下代码更新您的html（只需添加type="button"）

<%= 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" type="button">Button_1</button>
          <button class="btn" type="button">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 %>

【讨论】：