Enter does not submit form in IE because of hidden

Question

I have a form with two buttons. The first is hidden using Javascript.

When I press enter in a textfield in IE, the form does not submit. I assume it is because it has chosen the first button as default submit button, but since that button is hidden it does not work.

I have solved this by submitting the form on an enter keydown Javascript event. However, this also submits the form if the user presses enter to select an item from the browser's autocomplete dropdown.

How do I submit the form on enter in IE, without disturbing the autocomplete functionality?

Answer 1

We had a similar problem a few years ago, and AFAIR, we added an additional button to the beginning of the form, which always performs the default submit action when enter is pressed in IE. That button can be "almost hidden" by giving it a 1x1 transparent image.

Answer 2

Try to hide button with following class:

.hidden-element {
  width: 0px;
  height: 0px;
  position: absolute;
  top: -99999px;
  left: -99999px;
}

Answer 3

You can add additional button to retain submit button functionality in following way:

<![CDATA[<!--[if IE]>]]>
                <input type="text" style="display: none;" disabled="disabled" size="1" />
            <![CDATA[<![endif]-->]]>

Answer 4

I fixed it by opacity 0 like:

<input type="submit" style="width: 0px; height: 0px; opacity: 0;" id="submitBtn" name="submitBtn">