Hitting “enter” does not post form in IE8

Question

I'm using PHP to pass a login form when required, and here is the code:

$htmlForm = '<form id="frmlogin">'.'<label>';
switch(LOGIN_METHOD)
{
    case 'both':
        $htmlForm .= $ACL_LANG['USERNAME'].'/'.$ACL_LANG['EMAIL'];
        break;
    case 'email':
        $htmlForm .= $ACL_LANG['EMAIL'];
        break;
    default:
        $htmlForm .= $ACL_LANG['USERNAME'];
        break;
}                       

$htmlForm .= ':</label>'.
             '<input type="text" name="u" id="u" class="textfield" />'.
             '<label>'.$ACL_LANG['PASSWORD'].'</label>'.
             '<input type="password" name="p" id="p" class="textfield" />'.
             '<center><input type="submit" name="btn" id="btn" class="buttonfield" value="Sign in to extranet" /></center>'.
             '</form>';

return $htmlForm;

The problem is, is that when the user hits enter in IE8, the form does not submit, and the user is forced to hit the submit button.

How do I rectify this?

Answer 1

Here is a link in Microsoft on it which might shed some light for you.

Taking a quick read of the link it might actually be considered a bug submitting the form by the Enter Key, which I presume would of been fixed by Microsoft for IE8.

IE anomaly when using the enter key to submit a form

Edit:

This has now been removed but another link covering it again (bottom of page) which defined it and explaining the bug in IE Blog on December 18th 2008.

Answer 2

Also watch out for this fun fun bug:

I've learned the hard way that if your form is display:none at page load, even if you show it later with Javascript, IE8 still won't submit on enter. However, if it's not hidden at page load, and you set it to display:none after, like onDOMReady, then it works! WTF

More details and workaround here: http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter

Answer 3

Simulate a click

Here's how I do it in jQuery.

// Recreating normal browser behavior in Javascript. Thank you, Microsoft.
jQuery.fn.handle_enter_keypress = function() {
  if ($.browser.msie){
    $(this).find('input').keypress(function(e){
      // If the key pressed was enter
      if (e.which == '13') {
        $(this).closest('form')
        .find('button[type=submit],input[type=submit]')
        .filter(':first').click();
      }
    });
  }
}

$('form').handle_enter_keypress();

Answer 4

If this is a real problem and you can't find another solution you can always do an onkeypress event for the form and check if the Enter key was pressed.

EDIT: Here's the correct code according to Machine's answer:

$htmlForm .= ':<form><label>'.$ACL_LANG['USERNAME'].'</label>'.
                                     '<input type="text" name="u" id="u" class="textfield" />'.
                                     '<label>'.$ACL_LANG['PASSWORD'].'</label>'.
                                     '<input type="password" name="p" id="p" class="textfield" />'.
                                     '<center><input type="submit" name="btn" id="btn" class="buttonfield" value="Sign in to extranet" /></center>'.
                                     '</form>';

EDIT 2: Your HTML is valid. Try this:

function checkEnter(e) { //e is event object passed from function invocation
    var characterCode //literal character code will be stored in this variable

    if (e && e.which) { //if which property of event object is supported (NN4)
        e = e
        characterCode = e.which //character code is contained in NN4's which property
    }
    else {
        e = event
        characterCode = e.keyCode //character code is contained in IE's keyCode property
    }

    if (characterCode == 13) { //if generated character code is equal to ascii 13 (if enter key)
        document.forms[0].submit() //submit the form
        return false
    }
    else {
        return true
    }
}

Answer 5

Do you have an opening form tag that was just omitted from your code snippet?

Answer 6

I was able to reproduce this as well with an action and method. Stripped out all other code on the page and it still gets produced. However, I have seen forms work in IE8 with action=""