single text input form submit in IE
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+