Question

I am currently facing a problem.

I need have a form to be fill by a user ie:

field1: <input type='text' name='field1'>
field1: <input type='text' name='field1'>
<input type='button' value='Save' name='Save'>

So now I need the way to focus on the ‘Save’ button when a user has filled the last text box in a form, so that even when the user clicks on the ‘Enter’ button the save event get run.

This usually happens automatically but the problem is I have many buttons in my page, now when a user click on save another click event(that I don’t want) gets fired up.

So my question is how do I control what should happen when the ENTER button is clicked, or should I disable this event?

Answer 1

The way to accomplish that is by using javascript, and I’d suggest you using jQuery.

$('#mytextfield').change(function(e) {
    $('input[type=submit]').focus();
});

You can also autofocus an element on HTML5 by adding the attribute autofocus=”autofocus”

Take a look at the small demo : http://jsfiddle.net/9WmQ5/