HTML Form - Firing the form submit using the enter key does not work when focus is on a select list

Question

I'm stuck on the above problem. I have a simple form as follows, with a text input, a select list and a submit button. When focus is on the text input and I hit Enter, the form submits. If focus is on the select list the submit does not fire. I want the form to submit regardless of which field has focus.

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id='text1'/>
        <select>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
        <input type='submit' onclick='alert("you submitted the form")'/>
    </div>
    </form>
</body>
</html>

Well, I've never seen a different behaviour. This is the standard-behaviour with select-elements. You could hit tabulator and then enter. Shouldn't be that difficult :) — Fidi

Karman Kertesz Karman Kertesz · Accepted Answer · 2010-07-30T09:54:00

It's normal browser behaviour, to select an option with enter.

What you can do is attach a listener to the keyDown event of the select element and submit the form when the user pressed enter. For example. with jQuery:

$('#your-select').keydown(function(e){  
  if (e.keyCode == 13) {
      $('#your-form').submit();
    } });

You should consider that it breaks the standards and would cause a problem for users navigating with keyboard.

HTML Form - Firing the form submit using the enter key does not work when focus is on a select list

2 Answers