single text input form submit in IE

Jun 3, 2009
8 Comments

The previous form submit issues with IE post has generated some conversation in the post comments. In the original post I looked at the situation where you have a form with just a single text input and a submit button. The conversation developed to look at the situation where you have a form just with a single text field, no submit button at all. I did some hacking and came up with a fix which I thought warranted a new post.

To lay things out, single text field, no submit button. Type into the field and simply hit ‘enter’ is what we’re going for… in IE

The problem here is that we need the submit button to be in the code, we just don’t want to see it. Which makes hiding it with CSS display: none the obvious first choice. That works for firefox no problem.

Now, this will not work in IE for two reasons. The first is the same issue dealt with in my first post about submitting single input forms with the enter key in Internet Explorer. To deal with that problem, we add a hidden input just for IE.

The second issue is a bit more tricky. We can’t just hide the submit button with display: none because IE wont recognize that the button is there just not visible. Speaking of visible I also tried visibility: hidden and the same thing happens. Seems if the element isn’t displayed, IE doesn’t believe it’s there. Almost as if IE unregisters it from the DOM. Not sure what exactly is going on, need to look into it more.

In the meantime, the issue is coming up with some other way to visually hide the submit button. Give this a try in the CSS.

This obviously is kind of hackish and you could run into situations where hiding the element in this manner could affect your layout. But it works for now. I need to investigate a bit deeper into what it is about applying display: none that causes IE to treat the element like it isn’t there… that might lead to a more elegant solution.

Here are test cases

Single text input no visible submit button
works in Firefox but not IE

Single text input no visible submit button FIX
works in firefox and IE6+

8 Comments

  1. Jim Mayes

    # September 3, 2009 - 9:51 am

    Interesting 3sk3l4, I’ll have to give that a try as well. Thanks for the tip

  2. 3sk3l4

    # September 3, 2009 - 9:42 am

    You could also set overflow: hidden on the form and then use position: relative and left: -9999px on the submit button…

  3. Jarrett

    # October 18, 2010 - 3:26 pm

    This hack is no longer needed with IE9 so you may want to use

  4. Jim Mayes

    # October 23, 2010 - 6:33 am

    @Jarrett… I’m not so sure that it is fixed in IE9 beta. Try the first test case at the bottom of the post:

    Single text input no visible submit button

    That still doesn’t seem to work for me in IE9 beta?

  5. Ben

    # November 26, 2010 - 9:54 am

    Agreed, doesn’t work for me either in IE9 BETA… any ideas please?

  6. Jim Mayes

    # November 26, 2010 - 10:01 am

    This behavior still appears to be broken in IE9 Beta… however, my fix (in the post above) for the problem does still work for IE9 Beta. Follow the code in the post. Or click on the link to the demo of the fix and then view source.

  7. Charlie

    # February 23, 2011 - 7:45 am

    Jim, thank you for this fix. I’m building a site, and the form wouldn’t submit via enter key when using IE8.

  8. Ray

    # June 7, 2011 - 9:50 pm

    Just as an update, IE9 and above don’t have the ‘display:none’ issue anymore since the release.

Leave a Reply