当我点击表单中的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(); 

从良好的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属性,以确保您将获得您期望的行为。

你可以使用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 %>