Tutorial :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>  


Solution:1

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.


Solution:2

firefox does this by default, for ie you need some type of javascript function cause IE binds the submit on enter only to inputs.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »