Html 当我单击表单中的按钮时提交表单。如何避免这种情况？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9643806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form is submitted when I click on the button in form. How to avoid this?
提问by evfwcqcg
I use twitter-boostrap and I'd like to use these radio-buttonsin my form. The problem is when I click on any of these buttons, the form is immediately submitted. How to avoid this? I just want to use default buttons like radio-buttons.
我使用 twitter-boostrap，我想在我的表单中使用这些单选按钮。问题是当我单击这些按钮中的任何一个时，表单会立即提交。如何避免这种情况？我只想使用单选按钮等默认按钮。
from:
从：
<%= 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:
javascript:
// application.js
$('.tabs').button();
回答by mu is too short
From the fine HTML5 specification:
来自优秀的HTML5 规范：
A buttonelement with no typeattribute specified represents the same thing as a button element with its type attribute set to "submit".
甲按钮没有元素类型指定属性表示相同的事情与它的类型属性集的按钮元件到“提交”。
And a <button type="submit">submits the form rather than behaving like a simple <button type="button">push-button.
并且 a<button type="submit">提交表单而不是像一个简单的<button type="button">push-button。
The HTML4 specsays the same thing:
在HTML4规范说同样的事情：
type = submit|button|reset[CI]
This attribute declares the type of the button. Possible values:
submit: Creates a submit button. This is the default value.reset: Creates a reset button.button: Creates a push button.
type = submit|button|reset[CI]
这个属性声明了按钮的类型。可能的值：
submit: 创建一个提交按钮。这是默认值。reset：创建一个重置按钮。button: 创建一个按钮。
So your <button>elements:
所以你的<button>元素：
<button class="btn">Button_1</button>
<button class="btn">Button_2</button>
are the same as these (in compliant browsers):
与这些相同（在兼容的浏览器中）：
<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>
and any time you hit one of those buttons you'll submit your form.
并且只要您点击其中一个按钮，您就会提交表单。
The solution is to use plain buttons:
解决方案是使用普通按钮：
<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>
Some versions of IE default to type="button"despite what the standard says. You should always specify the typeattribute when using a <button>just to be sure that you will get the behavior you're expecting.
type="button"不管标准怎么说，某些版本的 IE 默认为。type使用<button>just时应始终指定属性，以确保获得预期的行为。
回答by Super User
You can use preventDefault()for this
你可以用preventDefault()这个
$('.btn').onClick(function(e){
e.preventDefault();
});
or you can update your html with following code (just add
type="button") in button tag
或者您可以
type="button"在按钮标签中使用以下代码（只需添加）更新您的 html
<%= 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 %>
回答by Atul Vaibhav
You can do this directly using rails form helper also by specifying typeas an option to "button":
您也可以通过指定type为“按钮”的选项直接使用 rails 表单助手执行此操作：
<%= 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 %>
