我可以让一个<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() ，它没有按预期工作（看起来相当丑陋！）。

Answer 1

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

 <button type=button>Submit</button> 

Answer 2

button元素具有默认的submittypes。

你可以通过设置一个buttontypes来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来提供其他function：

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

Answer 4

老实说，我喜欢其他答案。 容易，不需要进入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。

Answer 5

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