# javascript – HTML button to NOT submit form

## The Question :

398 people think this question is useful

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.

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


• This issue is not reproducible in modern browsers, and the problem may originally have resulted from a misunderstanding. While the default for button is type=submit, there is no form to be submitted when the button element is outside any form. Unless an actual demonstration (a sample document, identification of a browser, and description of observations that show that some form is submitted) can be given, this question should be closed as non-reproducible. Using type=button is good practice, but this does not make the problem real.

946 people think this answer is useful

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>



Update 5-Feb-2019: As per the HTML Living Standard (and also HTML 5 specification):

The missing value default and invalid value default are the Submit Button state.

38 people think this answer is useful

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.

17 people think this answer is useful

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

15 people think this answer is useful

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.

2 people think this answer is useful

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.)

1 people think this answer is useful

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.

<form onsubmit="return false;">