Can I make a <button> not submit a form?
Solution 1
The default value for the type
attribute of button
elements is "submit". Set it to type="button"
to produce a button that doesn't submit the form.
<button type="button">Submit</button>
In the words of the HTML Standard: "Does nothing."
Solution 2
The button
element has a default type of submit
.
You can make it do nothing by setting a type of button
:
<button type="button">Cancel changes</button>
Solution 3
Just use good old HTML:
<input type="button" value="Submit" />
Wrap it as the subject of a link, if you so desire:
<a href="http://somewhere.com"><input type="button" value="Submit" /></a>
Or if you decide you want javascript to provide some other functionality:
<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
Solution 4
<form onsubmit="return false;">
...
</form>
Solution 5
Yes, you can make a button not submit a form by adding an attribute of type of value button:
<button type="button"><button>
user3167101
I like to make stuff. Check out my blog. You can email me at alex at my domain. My dotfiles, if you're curious :)
Updated on July 25, 2020Comments
-
user3167101 almost 4 years
I've got a form, with 2 buttons
<a href="index.html"><button>Cancel changes</button></a> <button type="submit">Submit</button>
I use jQuery UI's button on them too, simply like this
$('button').button();
However, the first button also submits the form. I would have thought that if it didn't have the
type="submit"
, it wouldn't.Obviously I could do this
$('button[type!=submit]').click(function(event) { event.stopPropagation(); });
But is there a way I can stop that back button from submitting the form without JavaScript intervention?
To be honest, I used a button only so I could style it with jQuery UI. I tried calling
button()
on the link and it didn't work as expected (looked quite ugly!). -
Roman almost 14 yearsUsing a standard button control with proper type attribute is "good old html," and creates much simpler markup.
-
Jeffrey Blake almost 14 yearsIt's clearly not simpler if in some browsers it has a default type of submit and in others it has a default type of button. Heck, even just having the default type of submit complicates things more than is necessary IMO. There should be markup that easily provides a button that does nothing. And there is:
<input type="button" />
-
Adam McKee almost 14 years+1 I've used this exact technique lots of times, and it has always worked well for me. One variant is if you need to cancel the postback event for a server-side button based upon some client-side calculation, you can include window.event.returnValue = false; in your code that executes in the client-side onclick event for your button... that is, if using a custom validator control doesn't cut the mustard for you :)
-
Roman almost 14 years@JGB146: Just because not all browsers default to the same value doesn't mean they won't respect the correct type if it's set manually (as is suggested by jleedev. Not to mention the questions specifically asks for a way to do it without JavaScript while your answer doesn't take that into account.
-
Jeffrey Blake almost 14 years@R0MANARMY: I gave multiple options in my answer. The first one involves no JavaScript. Is there really a significant difference between
<input type="button" />
and<button type="button" />
in your eyes? To me, the only difference is that<input />
provides more functionality should you wish to employ it. -
Jeffrey Blake almost 14 yearsAnd to clarify, by "more functionality" I mean by supporting things like specifying size, alt text, disabling, etc. I honestly don't know if these things are in
<button />
because I do not use it. <a href='w3schools.com/tags/tag_button.asp'>W3Schools</a> does not list them for button, but obviously they do <a href='w3schools.com/tags/tag_input.asp'>for input</a> -
user3167101 almost 14 years
button
does have more support for styling. It's also easier to select in IE6, i.e.button { }
againstinput[type=submit] { }
for single submit buttons. I guess that is IE's fault though. -
Roman almost 14 years@JGB146:
Button
is a container in HTML. That allows you to place things like images or tables (not sure why you'd do this, but you could) etc whileinput
doesn't support that. There is a difference between the two, and each one has their appropriate use case. -
Jeffrey Blake almost 14 years@R0MANARMY: Thanks for noting this. As I said, I haven't used
button
so I didn't realize this difference. I would be interested in hearing your take on when only one of them is appropriate though. In fact, I'll start a question about that. After all, there is<input type="image" />
too, for the situations where you want an image as your button ;) -
Jeffrey Blake almost 14 yearsThe question already exists: stackoverflow.com/questions/1398955/…
-
Roman almost 14 years@JGB146: Unfortunately I don't really have a take on it, I knew there's a difference in that buttons are containers, and in what value they submit is not standard across all browsers.
-
Ilya Streltsyn almost 7 yearsRegarding the 2nd example: wrapping
input
ina
is invalid HTML! You can't and shouldn't nest interactive controls.