Focus an enter key to a specific button

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

JavaScript
​x
 
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

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

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

JavaScript
 
$('#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/

Advertisement

Answer