我可以让一个<button>不提交表单吗?

我有一个表格,有2个button

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

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

 $('button').button(); 

但是,第一个button也提交表单。 我会认为,如果它没有type="submit" ,它不会。

显然我可以做到这一点

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

但有没有一种方法,我可以阻止提交没有JavaScript干预的表单返回button?

说实话,我只用了一个button,所以我可以使用jQuery UI进行devise。 我试图调用button()上的button() ,它没有按预期工作(看起来相当丑陋!)。

button元素的type属性的默认值 “submit”。

 <button type=button>Submit</button> 

button元素具有默认的submittypes。

你可以通过设置一个buttontypes来button

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

只需使用旧的HTML:

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

把它作为链接的主题,如果你愿意的话:

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

或者,如果您决定要JavaScript来提供其他function:

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

老实说,我喜欢其他答案。 容易,不需要进入JS。 但是我注意到你在问jQuery。 所以为了完整起见,在jQuery中,如果您使用.click()处理函数返回false,它将会否定小部件的默认操作。

看到这里的例子 (也有更多的好东西)。 这里也是文档 。

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

 <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> 

作为一个额外的好处,有了这个,你可以摆脱锚标签,只需使用button。

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