如何解决当我单击表单中的按钮时,表单被提交如何避免这种情况?
根据优良的HTML5规范:
甲 按钮 没有元素 类型 指定属性表示相同的事情与它的类型属性集的按钮元件到 “提交” 。
并且a <button type="submit">
提交表单而不是像简单<buttontype="button">
的按钮那样操作。
在HTML4规范说同样的事情:
[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时,应始终指定属性,以确保获得期望的行为。
解决方法
我使用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();