HTML按钮不提交表单。

I have a form. Outside that form, I have a button. A simple button, like this:

我有一个形式。在窗体外面，我有一个按钮。一个简单的按钮，像这样:

<button>My Button</button>

Nevertheless, when I click it, it submits the form. Here's the code:

然而，当我点击它时，它会提交表单。这是代码:

<form id="myform">
    <input />
</form>
<button>My Button</button>

All this button should do is some JavaScript. But even when it looks just like in the code above, it submits the form. When I change the tag button to span, it works perfectly. But unfortunately, it needs to be a button. Is there any way to block that button from submitting the form? Like e. g.

这个按钮应该是一些JavaScript。但是，即使它看起来像上面的代码，它也会提交表单。当我将标记按钮更改为span时，它工作得非常好。但不幸的是，它必须是一个按钮。有什么方法可以阻止这个按钮提交表单吗?像e . g。

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

6 个解决方案

#1

684

I think this is the most annoying little peculiarity of HTML... That button needs to be of type "button" in order to not submit.

我认为这是HTML最烦人的小特性……该按钮需要键入“button”才能不提交。

<button type="button">My Button</button>

#2

return false; at the end of the onclick handler will do the job. However, it's be better to simply add type="button" to the <button> - that way it behaves properly even without any JavaScript.

返回错误;在onclick处理程序的末尾将执行此任务。但是，最好将type="button"添加到

#3

Dave Markle is correct. From W3School's website:

戴夫Markle是正确的。从W3School的网站:

Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".

始终为按钮指定类型属性。Internet Explorer的默认类型是“button”，而在其他浏览器(以及W3C规范)中，它是“submit”。

In other words, the browser you're using is following W3C's specification.

换句话说，您正在使用的浏览器遵循W3C规范。

#4

By default, html buttons submit a form.

默认情况下，html按钮提交表单。

This is due to the fact that even buttons located outside of a form act as submitters (see the W3Schools website: http://www.w3schools.com/tags/att_button_form.asp)

这是因为即使是位于表单之外的按钮也可以作为提交者(参见W3Schools网站:http://www.w3schools.com/tags/att_button_form.asp)。

In other words, the button type is "submit" by default

换句话说，默认情况下，按钮类型是“submit”。

<button type="submit">Button Text</button>

Therefore an easy way to get around this is to use the button type.

因此，解决这个问题的一个简单方法是使用按钮类型。

<button type="button">Button Text</button>

Other options include returning false at the end of the onclick or any other handler for when the button is clicked, or to using an < input> tag instead

其他选项包括在onclick末尾返回false，或者在单击按钮时返回任何其他处理程序，或者使用< input>标记

To find out more, check out the Mozilla Developer Network's information on buttons: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

要了解更多信息，请查看Mozilla开发人员网络关于按钮的信息:https://developer.mozilla.org/en/docs/Web/HTML/Element/button

#5

It's recommended not to use the <Button> tag. Use the <Input type='Button' onclick='return false;'> tag instead. (Using the "return false" should indeed not send the form.)

建议不要使用

Some reference material

一些参考资料

#6

For accessibility reason, I could not pull it off with multiple type=submit buttons. The only way to work natively with a form with multiple buttons but ONLY one can submit the form when hitting the Enter key is to ensure that only one of them is of type=submit while others are in other type such as type=button. By this way, you can benefit from the better user experience in dealing with a form on a browser in terms of keyboard support.

出于可访问性的原因，我不能使用多个类型=提交按钮来实现它。使用具有多个按钮的表单的惟一方法是，当单击Enter键时，只有一个按钮可以提交表单，这是为了确保其中只有一个是type=submit，而其他的是type=button之类的其他类型。通过这种方式，您可以从更好的用户体验中获益，在键盘支持方面处理浏览器上的表单。

#1

684