Form submit by enter key and Internet Explorer

Feb 13, 2009
49 Comments

Related: Submit Form when no submit button is present in IE

Ran into an (other) interesting Internet Explorer bug. Seems that if you have a form with only a single text input, hitting the enter button will not submit the form in IE.

The solution is to hide an additional disabled input for IE to find, using IE conditional Comments and hiding it from view with some CSS.

Now the form will submit in IE when you hit the enter key!

49 Comments

Newer Comments »

  1. Patrick Borter

    # April 17, 2009 - 12:12 pm

    Thanks so much for your post! You don’t want to know how much time I expended looking for and trying to find solutions for this problem. A majority of the related posts did not deal with the single-field aspect of the problem.

  2. Tristan

    # May 12, 2009 - 3:52 pm

    Throw a TextArea in there and check if it still works.

  3. Jim Mayes

    # May 13, 2009 - 10:09 am

    you mean like so…

    In a textarea, hitting enter/return is going to kick you to a new line. Tabbing out and hitting enter should still work tho, does it not?

  4. Rae

    # May 14, 2009 - 12:32 pm

    Actually, nope, that still won’t solve it.

    From what I’ve found while testing, it won’t work unless there is a second text input.

    Although, you’ll get a false positive if you have checkboxes a/o radio buttons and press enter while focusing on one of those elements, because the focus jumps to the submit button before submitting the form…

  5. Jim Mayes

    # May 14, 2009 - 1:41 pm

    Rae, are you saying that the fix in the original post above does not work? The one with the hidden text input contained within the IE conditional comment? Here are two test cases.

    test for IE, single text field

    test for IE, single text field FIXED (w/ hidden input)

    Tristan, for me, testing in IE8… a form with a single textarea submits fine with the enter key, once you tab out of the textarea. When focused in a textarea, the enter key produces a new line. As far as I know that’s universal behavior, you have to tab out of the textarea to regain the enter key.

    Here’s a test case for that

    test for IE, single textarea FIX (w/ hidden input)

  6. Meemawuk

    # June 3, 2009 - 9:50 am

    in the case of the last example (“test for IE, single text field FIX (w/ hidden input”), the only reason the test is submitted after pressing tab is because it tabs to the sumbit button, upon which you press enter.

    I have come across numerous pages that have no “submit” button to tab to, making the text/form impossible to submit.

  7. Jim Mayes

    # June 3, 2009 - 1:05 pm

    did a bit of hacking around and came up with something, thought it deserved a new post as a follow up. Have a read here

    single text input form submit in IE

  8. senshikaze

    # June 11, 2009 - 8:23 am

    You are awesome, man.
    I was banging my head trying to figure this out. Good work!

  9. Pepe Paco

    # June 19, 2009 - 7:55 am

    Thanks!!

    I’ve spent 1 hour searching this solution.

    You rule ;)

  10. Rae

    # July 30, 2009 - 1:35 pm

    Hmm. Sorry to get back here so delayed, and I have no idea what I was talking about in that comment. So, pretend I’m sitting here with a dunce cap on.

    I may have been confusing your code with some of my failed test cases, but I have no idea why I would have ever said “Actually, nope, that still won’t solve it.”

    Also though, both of your test pages seem to work for me in IE6 – even the one that should be broken.

    Regardless, this is actually a really elegant solution to that annoying bug. Any idea if it happens in 8? I still don’t have a platform I can test there.

    Hopefully I can pull my foot out of my mouth sometime this year….

  11. Rae

    # July 30, 2009 - 1:42 pm

    Oh! I submitted too soon. I know some of my confusion was that caused my idiotic comment. I think I read “additional disabled input” without looking at the code to see that it was an additional /text/ input:

    I did a bunch of testing and found that this bug shows up even if a form had additional inputs, such as hidden, radio or checkboxes (so long as there isn’t a second text one, obviously).

    It’s sneaky because most of the time hitting enter while focusing on the radio or checkbox inputs will first shift the focus to the submit button and then submit the form – which IE doesn’t bug out on; the bug doesn’t happen if you hit enter while focusing on the submit, only if you submit while focusing on a different input.

  12. Gary

    # November 3, 2009 - 12:13 pm

    Thank you for this post! I’ve been driving myself nuts with this for a good hour… added it, tested it in ie 7 & 8, worked great.

  13. Nelson

    # January 17, 2010 - 2:29 pm

    Worked for me. Thanks a bunch!

  14. Henry

    # January 19, 2010 - 3:31 pm

    erm, why you use input text and hide it? use input type hidden instead :-)

  15. Jim Mayes

    # January 20, 2010 - 8:00 pm

    because it doesn’t work with an input of type=hidden. you’re talking about doing it like this, correct?

    that wont work in IE. Here’s a test case with that code.

    If you just type in the text field and then hit enter, the form does not submit.

  16. Thomas Craig Consulting

    # April 15, 2010 - 3:38 am

    Excellent solution, not sure why people are trying to pick it apart, solved my issue in 3 minutes. Thanks.

  17. Michael

    # April 23, 2010 - 3:25 pm

    Great solution, thank you very much!

  18. Szentner Tamás

    # May 6, 2010 - 5:24 am

    thanks, great post, was getting creazy about this problem!

  19. Andrew

    # May 12, 2010 - 5:27 am

    Surprisingly enough, it worked perfectly.

    Thanks

  20. Curmudgeon

    # May 14, 2010 - 8:45 pm

    I’m astonished that 14 plus years after this standard HTML behavior came into widespread use, that Microsoft still can’t get it right. Or is this just a recent bug in MSIE 8, and it works ok in 6 and 7? (I never use MSIE, use a Mac, so can’t test it myself.)

  21. Zeeshan Rasool

    # May 27, 2010 - 3:56 am

    Thanks ! nice idea to get rid of this important issue of useless browser IE

  22. Lito

    # June 23, 2010 - 12:37 pm

    Thank you very much. That fixed our problem quite nicely.

  23. henke

    # July 28, 2010 - 1:41 am

    Works great, thanks!

  24. Nikita Sumeiko

    # August 25, 2010 - 2:45 am

    Thanks, really helped!

  25. Tom B

    # September 7, 2010 - 7:09 am

    Thanks! This had me examining my PHP scripts for 20 mins trying to track down the issue! I can’t believe that this kind of bug even exists, it’s just such a stupid bug.

  26. Steflex

    # September 23, 2010 - 9:46 am

    Really unbelielivable. Thanks man!! I wasn’t able to find it out and startet to write an onKeyPressEnter Event on my own :). Thanks again, that I hadn’t to finish it…

  27. Michael Grech

    # October 13, 2010 - 11:38 am

    My god you rock man! Thank you so much! I was going over and over that for one for a while.

  28. Rajashekar

    # October 14, 2010 - 3:55 pm

    Thanks alot man, weird bug!!

  29. Jesse

    # November 29, 2010 - 10:25 pm

    Great fix, Im glad I didn’t have to search long to find this fix – it’s indexed as no.1 in Google under “internet explorer form submit with enter key”.

    very happy! :) Works a treat.

  30. Andrrew

    # December 12, 2010 - 4:19 pm

    Phew! Like everyone else here, a life-saver and no through-the-night trying things out.
    Works on Win 7 IE8, Mac: Safari, Firefox, Opera, on a page with one field and a submit – onclick(), a normal link, and a link -onclick(). Without your mod, hitting enter after typing into the input field would activate the link – onclick()!!

    Thanks.

Newer Comments »

Leave a Reply