当我点击表单中的button时，表单被提交。 如何避免这一点？

我使用twitter-boostrap，我想在表单中使用这些单选button 。 问题是，当我点击这些button中的任何一个，表单立即提交。 如何避免这一点？ 我只想使用默认button，如单选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">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规范 ：

没有指定type属性的button元素表示与type属性设置为“submit”的button元素相同的东西。

而一个<button type="submit">提交表单，而不是像一个简单的<button type="button">button 。

HTML4规范说了同样的事情：

type = submit | button | reset [CI]
这个属性声明了button的types。 可能的值：

• submit ：创build一个提交button。 这是默认值。
• reset ：创build一个重置button。
• button ：创build一个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，你就会提交你的表格。

解决scheme是使用普通button：

 <button type="button" class="btn">Button_1</button> <button type="button" class="btn">Button_2</button> 

尽pipe标准说了什么，IE的一些版本默认为type="button" 。 在使用<button>时，您应该始终指定type属性，以确保您将获得您期望的行为。

Answer 2

你可以使用preventDefault()来做到这一点

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

或者你可以更新你的HTML代码（只需添加type="button" ）在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 %>