Hitting "enter" does not post form in IE8

13,842

Solution 1

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
    }
}

Solution 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

Solution 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();

Solution 4

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.

Solution 5

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

Share:
13,842
bear
Author by

bear

Updated on July 27, 2022

Comments

  • bear
    bear almost 2 years

    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?

  • Michal M
    Michal M almost 15 years
    type in first row . is: <labl> should be: <label>
  • bear
    bear almost 15 years
    Could you just revise the code from the full piece of code for that section to which I've added the full code?
  • the_drow
    the_drow almost 15 years
    It seems that your html is valid. Take a look at the answer now.
  • glagarto
    glagarto almost 14 years
    Good spot its now been removed. I've managed to find some other links which reference it but as its been resolved they have removed it.
  • 321X
    321X over 12 years
    Thanks! I did not know about this! IE7 does work if the form is display:none and IE8 does not....
  • 321X
    321X over 12 years
    See the comment of @infinity for the real solution.