Coding with Jesse

buttons need type="submit" to submit in IE

December 26th, 2008

In a typical round of doing Internet Explorer clean up at the end of a project, I had to figure out why my <button>Submit</button> wasn't submitting a form in IE.

I did a search on "html button" and went to the w3c HTML 4.01 specifications:

type = submit|button|reset [CI]

This attribute declares the type of the button. Possible values:

submit: Creates a submit button. This is the default value.
reset: Creates a reset button.
button: Creates a push button.

So the default is submit. But Internet Explorer has obviously forgotten this in IE6 and IE7. I found it worked without type="submit" in Firefox, Safari, Chrome and Opera. I haven't tested in IE8 because I don't have it installed. Maybe someone wants to check it out? Here is a demo page.

So I guess we should get in the habit of using:

<button type="submit">Submit</button>

Interested in web development? Subscribe to my newsletter!

Comments

1 . Артём Курапов at 2008-12-27T01:21:42.000Z

Артём Курапов

Yep, same thing. I guess I'll add it to my list of "why form is not submitting" list (in russian though)
http://kurapov.name/technology/ui/js/submitting_form/

2 . Mark at 2008-12-27T04:48:13.000Z

Mark

The default appears to be working in IE8 -- both forms in your demo page post just fine!

3 . kangax at 2008-12-27T15:46:28.000Z

kangax

Yep, IE8 works

4 . cnspider at 2009-01-12T01:07:31.000Z

cnspider

"<button type="submit">Submit</button>",IE8 works!
"<button>Submit</button>" not!

5 . jack at 2009-01-22T19:35:53.000Z

jack

Why would you use <button> instead of <input>?

Are you guys new to web development? I thought you were supposed to be experts?

Use:
<input type="submit" value="Text to appear on button" />

And then you won't have to post to your blog and expose how inexperienced you are when you can't make a submit button work.

Ugh.

6 . Jesse Skinner at 2009-01-22T19:48:19.000Z

Jesse Skinner

@jack I never used to use buttons either, I only started using buttons recently, hence the learning bump.

I like buttons. I think they're swell. What's wrong with buttons?

7 . jack at 2009-01-23T21:42:50.000Z

jack

Buttons blow.

8 . Kenneth Sundqvist at 2009-01-29T14:53:56.000Z

Kenneth Sundqvist

@jack

Not knowing when to use <button> instead of <input> makes YOU look really inexperienced.

I'm using it right now because I need to style the submit button with a sliding doors technique that works in FF3 and IE6+7.

<button><span><span>Jack is rude and ignorant</span></span></button>

9 . jack at 2009-02-04T16:03:15.000Z

jack

Umm, yeah, no.

Nesting spans because you have no skills _proves_ you are inexperienced, weak, and you have a gay porn mustache. Beat it.

10 . Bob at 2009-03-16T16:00:53.000Z

Bob

The world would be a better place w/o trolls like Jack.

11 . jaycverg at 2009-04-22T08:12:01.000Z

jaycverg

hey guys, this is suppose to be a learning blog, heheeh, please stop that...


well i'm using <input type="submit" /> in my works since JSF's <h:commandButton /> generates that..

12 . jaycverg at 2009-04-22T08:18:37.000Z

jaycverg

if you put <button /> tags inside a form, the values submitted will vary from browser to browwer. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

13 . TWStyles at 2010-03-26T20:30:09.000Z

TWStyles

I can't make the input type="submit" work if I use it the correct way or with buttons. It just is not working in IE 8. Works in everything but. I can use the a href link and it works fine. I can make it pop up using onclick but I can not make a regular input take me to another page of my site. IF YOU know how to do this, tell me what I am missing.

14 . jaycverg at 2010-03-28T05:09:47.000Z

jaycverg

@TWStyles:

So what do you want to do? you wanna navigate to another page using a simple input button? If that is the case, in your server side code, you will check the submitted data then you can issue a redirect command to another page. If in case it is just a simple navigation w/o the need of data submitted, you can use a javascript to change the location.href property.

15 . Are you for serious at 2010-09-24T03:02:13.000Z

Are you for serious

Are you for serious that submit buttons don't work in IE 6 and 7 unless you have type="submit"? Shooot. Now I hafta set up some test environment or other. IE 6,7 dont run on Windows 7. I bet I've been losing mad stupid conversions.

16 . daisy at 2010-10-12T20:18:34.000Z

daisy

Hey Jack, get off your high horse and stop being an ass. If you can't contribute to help people, keep quiet.

17 . David at 2010-11-11T03:44:07.000Z

David

@TWStyles: maybe you have a <form> within a <form>? IE tends not to like that... In any case you shouldn't be using a submit input to navigate to another page on the site unless you are submitting search parameters in a GET request, that is what the A tag is for.

@Jack: You might be nesting a span because you want your button to be variable width but use a single background image. Your presumptuousness about people's skill level is appalling.

18 . Dale Wastell at 2011-01-27T17:01:04.000Z

Dale Wastell

epic troll

19 . Dale Wastell at 2011-01-27T17:08:30.000Z

Dale Wastell

management

20 . Andrew Fisher at 2011-04-11T16:59:49.000Z

Andrew Fisher

IE8 gets this right most of the time... but if your site is in the Local Intranet zone the default for a button is still type="button" in IE8!

21 . Progys at 2011-04-21T13:16:14.000Z

Progys

In IE8 it works, but IE 7 fails submitting if type is not set.
Thanks for this post, it saved my day!

22 . Peter at 2011-05-13T11:20:01.000Z

Peter

thanks!

23 . Ryan at 2011-05-31T06:08:30.000Z

Ryan

This helped a lot. Thanks!

24 . FFF at 2011-06-03T07:59:26.000Z

FFF

Where is Jack? lol

25 . Dave at 2011-09-29T05:20:19.000Z

Dave

Five top reasons to use <button> tags:
1) they may contain (more or less) arbitrary HTML, making them cool
2) they are more easily styled than <input> tags
3) If you use Dean Edwards excellent script, IE7.js, then they will behave properly in all versions of IE (assuming js is enabled)...making them identical to their <input> counterparts, but more flexible
4) They are semantically 'cleaner'
5) They are getting a huge facelift in HTML5
Nuf said.

PS. I've been building websites since before Jack was in diapers.

26 . Andy at 2012-02-05T04:48:38.000Z

Andy

Great! Finally I fix the problem!