html单击出现表单,html-当我单击表单中的按钮时，表单已提交。 如何避免这种情况？...

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

我使用twitter-boostrap，我想在表单中使用这些单选按钮。问题是，当我单击这些按钮中的任何一个时，将立即提交表单。如何避免这种情况？ 我只想使用默认按钮，例如单选按钮。

从：

'control-label' %>

Button_1

Button_2

'btn btn-primary' %>

'btn' %>

javascript：

// application.js

$('.tabs').button();

3个解决方案

149 votes

根据优良的HTML5规范：

未指定类型属性的按钮元素表示与类型属性设置为“提交”的按钮元素相同的事物。

type="button"提交了表单，而不是像简单的type="button"按钮那样操作。

HTML4规范说了同样的话：

类型=提交|按钮|重置[CI]

此属性声明按钮的类型。 可能的值：

type="button"：创建一个提交按钮。 这是默认值。

type="button"：创建一个重置按钮。

type="button"：创建一个按钮。

因此，您的type="button"元素：

Button_1

Button_2

与以下相同(在兼容的浏览器中)：

Button_1

Button_2

只要您按下其中一个按钮，就会提交表格。

解决方案是使用普通按钮：

Button_1

Button_2

尽管标准规定，IE的某些版本仍默认为type="button"。 使用时，应始终指定type属性，以确保获得预期的行为。

mu is too short answered 2020-01-03T18:46:58Z

0 votes

您可以为此使用type="button"

$('.btn').onClick(function(e){

e.preventDefault();

});

或者您可以在按钮标签中使用以下代码(只需添加type="button")来更新html

'control-label' %>

Button_1

Button_2

'btn btn-primary' %>

'btn' %>

Super User answered 2020-01-03T18:47:22Z

0 votes

您还可以通过指定type作为“按钮”的选项，直接使用rails form helper来执行此操作：

'control-label' %>

'btn btn-primary' %>

'btn' %>

Atul Vaibhav answered 2020-01-03T18:47:42Z