HTML button to NOT submit form

Question

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

score 1132 · Accepted Answer · edited Feb 05 '19 at 17:33

1132

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.

edited Feb 05 '19 at 17:33

jpp

159,742
34
281
339

answered May 13 '10 at 10:03

Dave Markle

95,573
20
147
170

9

@Powerslave any reason to not `to use – Sandip Pingle Aug 19 '14 at 13:26
4

@SandipPingle There's no reason to use it, unless you need some really complex kind of styling. Also, IE6 and IE7 (fortunately being phased out) handle ` – Powerslave Aug 22 '14 at 11:50
47

This is a great answer, but it's not a *peculiarity*. The default value of the `type` attribute in a ` – Michael Benjamin Sep 03 '15 at 14:35

ThiefMaster · Answer 2 · 2014-09-11T14:58:18.397

43

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.

edited Sep 11 '14 at 14:58

answered May 13 '10 at 10:02

ThiefMaster

310,957
84
592
636

1

Buttons which do not submit forms are only useful with JavaScript enabled anyway... I agree that type="button" is cleaner though. – ThiefMaster Sep 09 '10 at 01:36
5

`return false;` does not work in all scenarios, while `type="Button"` does. Even with enabled JavaScript. – brejoc Sep 11 '14 at 14:57

score 31 · Answer 3 · answered Nov 20 '16 at 12:02

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

score 16 · Answer 4 · answered May 13 '10 at 10:28

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.

kk64738 · Answer 5 · 2021-04-19T16:58:41.863

6

Another option that worked for me was to add 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.

edited Apr 19 '21 at 16:58

answered Mar 18 '20 at 17:14

kk64738

314
4
15

score 3 · Answer 6 · edited Aug 04 '15 at 08:41

3

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

edited Aug 04 '15 at 08:41

RevanthKrishnaKumar V.

1,855
1
21
34

answered May 13 '10 at 10:11

Tim

939
1
7
13

5

It's enough to use ``, and it's enough to `return false;` - there's no need to do both. – Tom Aug 10 '12 at 01:50
I don't agree that it is recommended not to use the button tag. If you don't use it, you lose some accessibility features that you would automatically get with the button tag. I'd say the button tag is actually recommended for elements that act as buttons. – CookieEater Jun 30 '17 at 12:01
1

according to the note in reference material you've linked: "While elements of type button are still perfectly valid HTML, the newer – jedzej Jun 27 '19 at 07:09
I'm in agreement with this answer, but I can also see the upsides of using a button tag with the correct type attribute. – Leslie Krause Dec 30 '22 at 00:46

score 1 · Answer 7 · answered Jul 25 '17 at 10:32

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.

Charles Owen · Answer 8 · 2022-02-11T17:43:47.240

1

Late in the game, but you don't need ANY JavaScript code to use a button as a button. 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. The cool thing about this is if you add an event handler it will bypass submitting the form.

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

edited Feb 11 '22 at 17:43

answered Feb 11 '22 at 17:24

Charles Owen

2,403
1
14
25

score 0 · Answer 9 · edited Sep 04 '22 at 01:18

There is also way to prevent doing the submit when clicking the button. To achieve this, you have to use event.preventDefault() method.

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>

HTML button to NOT submit form

9 Answers9

Linked

Related