In IE8 enter key in a form does not work

Question

I have a problem that in IE8 the enter does not work to submit a form. I have generated a test page to expose this problem. It seems that displaying the form in the onLoad function disables results that the enter button does not trigger a submit anymore. Is this a bug in IE8 or is it some security issue?

The code to reproduce this is:

onload = function() { 
    document.getElementById('test').style.display = 'block'; 
}

#test {
    display: none;
}

<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value=""> 
    <input type="password" name="pw" value="">
    <input type="submit" value="submit" id="submit"> 
</form>

dupe: http://stackoverflow.com/questions/964734/hitting-enter-does-not-post-form-in-ie8 — Michael Todd, Sep 15 '09 at 15:47

score 13 · Accepted Answer · answered Sep 16 '09 at 15:14

I have found a proper solution and wanted it to share with u guys.

Instead of using <input type="submit...>, use <button type="submit"...>. This will do exactly the same in the other browsers (IE6-7, FF3) AND works in IE8. :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css">
#test {
    display: none;
} 
</style> 
<script type="text/javascript"> 
onload = function() { 
    document.getElementById('test').style.display = 'block'; 
};
</script> 
</head> 
<body> 
<form id="test" method="get" action="javascript:alert('woei!')"> 
    <input type="text" name="user" value="" /> 
    <input type="password" name="pw" value="" />
    <button type="submit" value="submit" id="submit"></button>
</form> 
</body> 
</html>

I'm not seeing this working in IE 8. I still get the "null" value on the other end. It's easier to just test for "if(submit == "submit" || submit == null)", assuming that "null" means that they hit "ENTER" in IE 8 or 9. — James, May 02 '13 at 14:11

score 9 · Answer 2 · edited May 23 '17 at 11:53

9

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $("form").submit();
   }
});

Above is a proper fix. Ref: IE Not submitting my form on enter press of enter key?

edited May 23 '17 at 11:53

Community

1
1

answered Feb 15 '13 at 09:29

Jitendra Pancholi

7,897
12
51
84

that did it for me, probably not the best solution but it works, well done, +1 – Immutable Brick Mar 18 '13 at 09:14

Yasin Ergul · Answer 3 · 2010-02-23T12:39:59.447

I think everthing is much more complicated than you think...

when a form's display value is set to none with a css class or just with a style attribute on page inital, hitting the enter key in a text field does not work only if you have more than one input field with text type... if you have one text field it works fine.. if you have more than one, it does not fire form submission...

Here i made a demo...

Works Fine (Normal Form) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/one.html

Works Fine (Form hidden & set back visible but it's with one text input) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/two.html

Does Not Work (Form hidden & set back visible but it's with two text input) http://yasinergul.com/stackoverflow/ie8-enter-key-bug/three.html

i think the best approach is to give a .hidden class to the object but not setting display:none for this css selector. you can make it hidden with jquery like

$(".hidden").hide();

as the page loads the form is shown for miliseconds but gets hidden after jquery works...

There is a nice write-up on this at: http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter — nachtigall, Nov 13 '15 at 15:23

score 4 · Answer 4 · answered Sep 15 '09 at 16:08

I can't say if it is a bug exactly, but I can confirm that the behavior you report has changed in IE 8... and I imagine it is probably a bug, not an deliberate change.

If the form is set with CSS display:none the default submit button behavior doesn't work.

Other browsers, including IE 7 (or even IE 8 using IE 7 standard compatibility mode) do not have problems.

I've worked around the problem myself by just using height:0px; in the CSS, then having javascript set the appropriate height when I want to show the form. Using height instead, the default enter key submit behavior seems to work normally.

score 1 · Answer 5 · answered Sep 24 '12 at 10:00

Old ticket, but I'd like to add what I think is the explanation:

IE8 does the following peculiar thing: the Enter key will submit the form, but any

<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />

won't be sent in the POST.

IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.

I hope this helps...

score 1 · Answer 6 · answered Nov 05 '13 at 20:53

1

For any future users stumbling upon this question:

What worked for me was adding a DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

answered Nov 05 '13 at 20:53

etm124

2,100
4
41
77

score 1 · Answer 7 · answered Jan 09 '15 at 14:49

1

A fix to what @Jitendra Pancholi suggested- now it submits only the form we want, not all of them

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $(this.form).submit();
   }
});

answered Jan 09 '15 at 14:49

Tom

2,962
3
39
69

CodePartizan · Answer 8 · 2009-09-15T15:59:22.563

0

I tried it in IE8 and it works for me. You have to make sure that part of the form has focus though.

Javascript has a focus function that you can use to set the focus if that's what you need.

var textbox = document.getElementById("whatever name input box's id will be");
if(textbox) textbox.focus();

edited Sep 15 '09 at 15:59

answered Sep 15 '09 at 15:52

CodePartizan

318
3
7

Yeah, for some odd reason when I open it as a local file I don't get to choose whether to use compatability and it works. I put in in IIS and then it let me choose not to us compatability and I see the behavior you describe. Weird . . . – CodePartizan Sep 17 '09 at 14:28

score 0 · Answer 9 · answered Sep 15 '09 at 16:02

You may want to add a onkeyup event to your input boxes so that if you hit an enter in the input box then it will also submit.

As CodePartizan mentioned, you need the focus on the button otherwise, so if you tab over to the button, or click on it, it seems to work for me also.

score 0 · Answer 10 · answered Jul 04 '13 at 15:01

0

This works for me in IE8. I had this problem when using only one input field.

Read more: http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

answered Jul 04 '13 at 15:01

Erik

1
1

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference. – kleopatra Jul 04 '13 at 15:23

score 0 · Answer 11 · 2010-03-01T11:52:05.340

0

I believe Yasin has got the point. I just had the same problem: multiple text fields within a form whose visibility is "hidden". My workaround (to prevent the form from flashing) is to set the form opacity to 0 in the css, and then customise its style settings with jQuery on document ready.

I believe this is not something to fix with JS.

edited Mar 01 '10 at 11:52

answered Mar 01 '10 at 11:23

score 0 · Answer 12 · answered Aug 26 '14 at 20:30

0

I had the same issue with ie and none of the solutions helped until I read this:

http://www.rachaelarnold.com/dev/archive/enter-key-form-submission-bug#ixzz2Y5Zwgj2k

my form only had one input field....duh! :)

answered Aug 26 '14 at 20:30

Carlos

59
1
2

score 0 · Answer 13 · answered Feb 02 '15 at 18:54

0

Found a working solution.

Make the submit button invisible instead of using display:none;

input#submit {
color: transparent;
background: transparent;
border: 0px;
}

answered Feb 02 '15 at 18:54

user3293279

3
5

score 0 · Answer 14 · answered Dec 20 '10 at 19:15

Yeah, I was bitten by this bug too today. I found this workaround, though (diff from the OP):

 <script type="text/javascript"> 
 onload = function() { 
     document.getElementById('test').style.display = 'block'; 
+    document.getElementById('test').innerHTML =
+        document.getElementById('test').innerHTML;
 } 
 </script> 
 </head>

Simply recreate the contents of the form from the contents of itself. Yikes. But it works. (Famous last words...)

In IE8 enter key in a form does not work

14 Answers14

Linked