HTML 按钮不提交表单
[英]HTML button to NOT submit form
问题描述
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">
<label>Label
<input />
</label>
</form>
<button>My Button</button>
All this button should do is some JavaScript.所有这个按钮应该做的是一些 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 eg像例如
<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
9 个解决方案
解决方案1
1062 已采纳 2010-05-13 10:03:05
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 type="button">My Button</button>
Update 5-Feb-2019: As per the HTML Living Standard (and also HTML 5 specification ): 2019 年 2 月 5 日更新：根据HTML 生活标准（以及HTML 5 规范）：
The missing value default and invalid value default are the Submit Button state.
解决方案2
39 2010-05-13 10:02:28
return false; at the end of the onclick handler will do the job.在 onclick 处理程序结束时将完成这项工作。 However, it's be better to simply add type="button" to the <button> - that way it behaves properly even without any JavaScript.但是，最好将type="button"简单地添加到<button> - 这样即使没有任何 JavaScript，它也能正常运行。
解决方案3
24 2016-11-20 12:02:00
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 )
In other words, the button type is "submit" by default也就是说，按钮类型默认为“提交”
<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
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
解决方案4
16 2010-05-13 10:28:54
Dave Markle is correct.戴夫马克尔是正确的。 From W3School's website :来自W3School 的网站：
Always specify the type attribute for the button.
In other words, the browser you're using is following W3C's specification.换句话说，您使用的浏览器遵循 W3C 的规范。
解决方案5
6 2020-03-18 17:14:52
Another option that worked for me was to add onsubmit="return false;"另一个对我有用的选项是添加 onsubmit="return false;" to the form tag.到表单标签。
<form onsubmit="return false;">
Semantically probably not as good a solution as the above methods of changing the button type, but seems to be an option if you just want a form element that won't submit.语义上可能不如上述更改按钮类型的方法那么好的解决方案，但如果您只想要一个不会提交的表单元素，这似乎是一种选择。
解决方案6
2 2010-05-13 10:11:38
It's recommended not to use the <Button> tag.建议不要使用<Button>标签。 Use the <Input type='Button' onclick='return false;'> tag instead.请改用<Input type='Button' onclick='return false;'>标签。 (Using the "return false" should indeed not send the form.) （使用“return false”确实不应该发送表单。）
Some reference material一些参考资料
解决方案7
1 2017-07-25 10:32:50
For accessibility reason, I could not pull it off with multiple type=submit buttons.出于可访问性的原因，我无法使用多个type=submit按钮来完成它。 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 .本地处理具有多个按钮但只有一个可以在Enter键时提交form的唯一方法是确保其中只有一个是type=submit而其他是其他类型，例如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.通过这种方式，您可以从键盘支持方面在浏览器上处理表单时获得更好的用户体验。
解决方案8
0 2022-02-11 17:24:52
Late in the game, but you don't need ANY JavaScript code to use a button as a button.在游戏后期，但您不需要任何 JavaScript 代码即可将按钮用作按钮。 The default behavior is to submit the form, most people don't realize that.默认行为是提交表单，大多数人没有意识到这一点。 The type parameter has three options: submit (default), button and reset. type参数有三个选项：submit（默认）、button和reset。 The cool thing about this is if you add an event handler it will bypass submitting the form.很酷的一点是，如果您添加一个事件处理程序，它将绕过提交表单。
<button type="button">My Button</button>
解决方案9
0 2022-09-01 09:10:09
There is also way to prevent doing the submit when clicking the button.还有一种方法可以防止在单击按钮时进行提交。 To achieve this, you have to use event.preventDefault() method.为此，您必须使用 event.preventDefault() 方法。
document.querySelector("button#myButton").addEventListener("click", (event) => { document.getElementById("output-box").innerHTML += "Sorry; <code>preventDefault()</code> won't let you submit this.<br>"; event,preventDefault(); }, false);
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="src/style.css"> </head> <body> <form id="myform"> <label>Label <input /> </label> <button id="myButton">My Button</button> </form> <div id="output-box"></div> <script src="src/script.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.