• buttons need type="submit" to submit in IE

    Dec 26 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>
  • Comments

    1. Артём Курапов at 8:21pm on December 26, 2008

    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 11:48pm on December 26, 2008

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

    3. kangax at 10:46am on December 27, 2008

    Yep, IE8 works

    4. cnspider at 8:07pm on January 11, 2009

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

    5. jack at 2:35pm on January 22, 2009

    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 2:48pm on January 22, 2009

    @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 4:42pm on January 23, 2009

    Buttons blow.

    8. Kenneth Sundqvist at 9:53am on January 29, 2009

    @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 11:03am on February 4, 2009

    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 12:00pm on March 16, 2009

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

    11. jaycverg at 4:12am on April 22, 2009

    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 4:18am on April 22, 2009

    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 4:30pm on March 26, 2010

    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 1:09am on March 28, 2010

    @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 11:02pm on September 23, 2010

    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 4:18pm on October 12, 2010

    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 10:44pm on November 10, 2010

    @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 12:01pm on January 27, 2011

    epic troll

    19. Dale Wastell at 12:08pm on January 27, 2011

    management

    20. Andrew Fisher at 12:59pm on April 11, 2011

    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 9:16am on April 21, 2011

    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 7:20am on May 13, 2011

    thanks!

    23. Ryan at 2:08am on May 31, 2011

    This helped a lot.  Thanks!

    24. FFF at 3:59am on June 3, 2011

    Where is Jack? lol

    25. Dave at 1:20am on September 29, 2011

    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 11:48pm on February 4, 2012

    Great! Finally I fix the problem!

    Commenting is now closed. Come find me on Twitter.