HTML button to NOT submit form
I have a form. Outside that form, I have a button. A simple button, like this:
Nevertheless, when I click it, it submits the form. Here’s the code:
I think this is the most annoying little peculiarity of HTML… That button needs to be of type “button” in order to not submit.
<button type="button">My Button</button>
The missing value default and invalid value default are the Submit
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
Dave Markle is correct. From W3School’s website:
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”.
In other words, the browser you’re using is following W3C’s specification.
By default, html buttons submit a form.
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
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
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.