I have a form on my page, with one text input and one submit input, that sends info to a php script. Users can submit the form either by pressing 'enter' on their keyboard, or clicking the submit button.

In IE9 and ever other browser, the user can hit 'enter' or click the submit button and everything works fine, but in IE 8 if the user clicks the submit button, it works fine, but if they press 'enter' the form does not send the info.

The form opens up a new tab, so i know the form is submitting when the user hits 'enter', its just that the information does not send to the new page on IE8.

Anyone have some suggestions?

Thanks!

Code:

<form action="/search.php" method="post" onsubmit="location.reload(true)" target="_blank" name="myform">
    <table style="width: 100%; min-width: 728px; margin: 150px 0px 170px 0px; text-align: center;">
        <tr>
            <td valign="middle"><img alt="Logo" src="vivvulogo.png" /><br />
            <input maxlength="256" name="query" id="query" style="width: 400px; height: 25px; font-size: medium;" type="text" />
            <input name="submit" style="height: 30px; width: 120px; height: 30px; font-size: medium; background-color: #CCCCCC; border-style: solid; border-color: #999999; border-width: 1px; vertical-align: top;" type="submit" value="Search" /><br />
             </td>
        </tr>
    </table>
</form>

If you are using a button tag, hitting enter won't submit the form...

Hiding submit buttons by using display:none, positioning them off the page, hiding them inside an overflow:hidden, or any other method will break the enter-to-submit functionality as well.

If a form is hidden when the page loads and is displayed using JavaScript, the enter-to-submit will also be broken.

It appears that Internet Explorer scans the page at load time and figures out which submit buttons are visible, then attaches the enter-to-submit functionality to those forms.

Without seeing any of your code it is difficult to tell what exactly is the best solution for you, but to fix these scenarios, you can usually use the following JavaScript:

function addInputSubmitEvent(form, input) {
    input.onkeydown = function(e) {
        e = e || window.event;
        if (e.keyCode == 13) {
            form.submit();
            return false;
        }
    };
}

window.onload = function() {
    var forms = document.getElementsByTagName('form');

    for (var i=0;i < forms.length;i++) {
        var inputs = forms[i].getElementsByTagName('input');

        for (var j=0;j < inputs.length;j++)
            addInputSubmitEvent(forms[i], inputs[j]);
    }
};

If you're looking for a jQuery solution...

$(function(){
    $('input').keydown(function(e){
        if (e.keyCode == 13) {
            $(this).parents('form').submit();
            return false;
        }
    });
});

more