ansaurus

Question

ENTER key on a FORM with a single Input Field, will automatically SUBMIT with GET

Answer 1

+5 A:

This is a little known "Quirk" that has been out for a while. I know some people have resolved it in various ways.

The easiest bypass in my opinion is to simply have a second input that isn't displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.

I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.

Mitchel Sellers 2009-09-02 20:50:15

Thanks, I wish it were documented somewhere. I wasted hours debugging a large page thinking it was something else, tied to my ajax. I only discovered the "quirk" after I extracted the code and started to delete line after line. What a waste of time!

sdfor 2009-09-02 20:54:40

And you are right, it's an easy fix with a hidden field. Incidentally if affects firefox 3.5.2. Maybe it's considered a feature.

sdfor 2009-09-02 21:06:26

Ah yes, I feel your pain....that is how I found out about it, say 5-6 years ago...

Mitchel Sellers 2009-09-02 21:06:38

Also I discovered that a hidden field doesn't always work. On one page it did and another it didn't - also odd. but hiding the field with javascript did the trick.You need to write an article "Things you don't know that will eat up your time" - thanks again

sdfor 2009-09-02 21:23:57

Answer 2

+1 A:

It's not reloading the page as such, it's submitting the form.

However, in this example because you have no action attribute on the form it submits to itself which gives the impression of reloading the page.

Also, I can't repro the behaviour you describe. If I am in any text input in a form and I press Enter it submits the form, no matter where in the form the input is located or how many inputs there are.

You might want to try this out some more in different browsers.

Andy Hume 2009-09-02 20:54:28

You're right I was not using the right words. It is submitting the form and since I don't specify an action it defaults to itself.I copied the exact HTML and ran it in IE8 and Firefox 3.5.2.An enter key in the first 2 fields, that are in the first form, do not submit the form, while an enter key in the third field does.

sdfor 2009-09-02 21:01:37

Answer 3

+2 A:

This is a known bug in IE6/7/8. It doesn't appear that you will get a fix for it.

The best workaround you can do for this, is to add another hidden field (if your engineering conscience permits). IE will no longer auto-submit a form when it finds that there are two input-type fields in the form.

Update

In case you were wondering why this is the case, this gem comes straight out of the HTML 2.0 specification (Section 8.2).

Vineet Reynolds 2009-09-02 21:46:18

This also happens in Firefox 3.5

Dimitri Wetzel 2009-10-20 10:40:34

Answer 4

+2 A:

Pressing Enter works differently depending on (a) how many fields there are and (b) how many submit buttons there are. It may do nothing, it may submit the form with no 'successful' submit button, or it may pretend the first submit button was clicked (even generating an onclick for it!) and submit with that button's value.

For example, if you add an input type="submit" to your two-field form, you'll notice it too submits.

This is an ancient browser quirk going back at least as far as early Netscape (maybe further), which is unlikely to be changed now.

<form>

Invalid without an ‘action’. If you don't intend to submit anywhere, and you don't need radio button name grouping, you could just completely omit the form element.

bobince 2009-09-03 16:09:10

thanks, good answer. Though I need the form to serialize the fields for Ajax. I could code it manually, but with many forms it would be a pain.

sdfor 2009-09-03 20:47:14

Answer 5

A:

sdfor 2009-09-04 22:59:19

Answer 6

A:

Here is the code that I used would use to solve the problem:

<form>
<input type="text" name="partid" id="partid"  />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>

JeffJak 2009-10-12 18:29:15

ansaurus

tags:

views:

answers:

ENTER key on a FORM with a single Input Field, will automatically SUBMIT with GET

related questions