我可以让<按钮>不提交表格吗？

Question

我有一个表格,有2个按钮

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

我也使用jQuery UI的按钮,就像这样

$('button').button();

但是,第一个按钮也会提交表单.我会想,如果它没有type="submit",它就不会.

显然我可以做到这一点

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

但有没有办法可以阻止后退按钮提交表单而无需JavaScript干预？

说实话,我只使用了一个按钮,所以我可以使用jQuery UI来设置它.我试着调用button()链接,它没有按预期工作(看起来很丑!).

Answer 1

元素type属性button 的默认值是 "submit".

<button type="button">Submit</button>

Answer 2

该button元素的默认类型为submit.

您可以通过设置以下类型使其无效button:

<button type="button">Cancel changes</button>

Answer 3

只需使用旧的HTML:

<input type="button" value="Submit" />

如果您愿意,请将其作为链接的主题包装:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

或者,如果您决定要javascript提供其他功能:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

Answer 4

是的，您可以通过添加值按钮类型的属性来使按钮不提交表单：

<button type="button"><button>

Answer 5

<form onsubmit="return false;">
   ...
</form>

Answer 6

老实说,我喜欢其他答案.简单而无需进入JS.但我注意到你问的是jQuery.因此,为了完整起见,如果使用.click()处理程序返回false,则在jQuery中,它将取消窗口小部件的默认操作.

请看这里的示例(以及更多好东西). 这里也是文档.

简而言之,使用示例代码,执行以下操作:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

<a href="index.html"><button>Cancel changes</button></a>
<button type="submit">Submit</button>

另外一个好处是,你可以摆脱锚标签,只需使用按钮即可.