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

小编典典

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

html

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

阅读 381

2020-05-10

共1个答案

小编典典

根据优良的HTML5规范：

甲按钮没有元素类型指定属性表示相同的事情与它的类型属性集的按钮元件到 “提交” 。

并且a <button type="submit">提交表单而不是像简单<buttontype="button">的按钮那样操作。

在HTML4规范说同样的事情：

type = commit | 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时，应始终指定属性，以确保获得期望的行为。

2020-05-10