Question

这是我的表格。问题是，当我点击第二个按钮时，它会将我注销

<form action="/Account/LogOff"
      id="logoutForm"
      method="post">
    @Html.AntiForgeryToken()
    <button class="small" type="submit" >Logout</button>
    <button id="theme" onclick="setThemeColor(this)">#</button>
</form>

Answer 1

因为按钮的默认类型是submit。见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

出于这个原因，您必须通过js或通过将其类型设置为button

来阻止此行为

<button id="theme" onclick="setThemeColor(this)" type="button">#</button>

Answer 2

您可以通过返回false;

取消元素的默认事件，在这种情况下提交

<button id="theme" onclick="setThemeColor(this); return false;">#</button>

<强>增加：

如果未指定属性，或者属性动态更改为空值或无效值，则按钮将表现为提交。由于你have not specified type attribute到你的按钮，它的行为就像提交一样。

Answer 3

如果使用input标记指定按钮，则不会发生这种情况。奇怪但真实。

例如：

 <input type="button" id="theme" onclick="setThemeColor(this)" />

在此处查看演示：http://jsfiddle.net/Kjk4y/

为什么单击未标记为提交的按钮会导致提交表单？

3 个答案: