我可以<button>不提交表格吗？</button>

我有一个表格，有两个按钮

<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() ，但未按预期工作（看起来很丑！）。

---

#1楼

只需使用良好的旧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();"/>

---

#2楼

为默认值type的属性button元素 是 “提交”。 将其设置为type="button"以产生不提交表单的按钮。

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

用HTML标准的话说：“什么都不做。”

---

#3楼

button元素具有默认的submit类型。

您可以通过设置button的类型使其不执行任何操作：

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

---

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

另外一个好处是，您可以摆脱锚标记，而只需使用按钮。

---

#5楼

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3160388