This article is about how to use jQuery for a form to automatically have the focus and the cursor go to the next form field, or input type="text" box, when the user presses ENTER.

This code was modified from answer to a post on Activating next input field in form on enter.

This is a great tool for forms that are used repeatedly, lengthy forms and forms with a number of input fileds. It makes it faster for the user, so he does not have to remove his hands from the keyboard to type into the next input text box.

This form uses the jQuery API .on(), event.which, event.preventDefault(), and .focus() methods. It also uses the JavaScript functions of .preventDefault(), parseFloat() and toString().

For this code to work, you will need to add index numbers to the field in the HTML document.


Lets look at the code:

$('#presentTense').on('keydown', 'input', function(event) { 
    if (event.which == 13) {
        var currBox = $(;
        var indexNum = parseFloat(currBox.attr('data-index'));
        $('[data-index="' + (indexNum + 1).toString() + '"]').focus();

Lets review the code:

$('#presentTense').on('keydown', 'input', function(event) {

The selector #presentTense is the container for the form elements. The jQuery API method of .on() is given the parameters of 'keydown' and 'input' and creates a function().

if(event.which == 13) {

This sets up an event tester that kicks in when the ENTER key is pressed. It uses the jQuery event.which method to test for a specific event of 13. The key code for ENTER is 13 across all the major browsers.


This is the jQuery method of event.preventDefault(). This stops the browser from doing the default action for that event.

var currBox = $(;

This sets up a variable of currBox that holds the value of the input field in question

var indexNum = parseFloat(currBox.attr('data-index'));

This creates the variable indexNum that holds the value of the attribute of 'data-index'. Each input type="text" in the form will be assigned a unique data-index number. parseFloat makes sure that the value is a number and not a string.

$('[data-index="' + (indexNum + 1).toString() + '"]').focus();

The selector here is a bit complicated. It is specifying the element with the attribute of "data-index"  and then does some math with the variable of indexNum. Finally it uses .focus() to heve the browser focus on that element.

Now lets look at the associated HTML document:

<h2>Create Spanish verb files</h2>
<form id="presentTense" action="verbProcess.php" method="post" autocomplete="off">
<p>Verb: <input data-index="1" type="text" name="verbInfinitive"></p>
<p>Verb Definition: <input data-index="2" type="text" name="verbDef"></p>
<table border="0">
<td><input type="text" data-index="3" name="fps"></td>
<td><input type="text" data-index="6" name="fpp"></td>
<td><input type="text" data-index="4" name="sps"></td>
<td><input type="text" data-index="7" name="spp"></td>
<td>él ella usted</td>
<td><input type="text" data-index="5" name="tps"></td>
<td>ellos ellas ustedes</td>
<td><input type="text" data-index="8" name="tpp"></td>
<input type="submit" value="SUBMIT">

 If you look at the <input> elements of the HTML document, you will see that each one has an attribute of data-index="" added with a unique number

<td><input type="text" data-index="5" name="tps"></td>

 Below is the result. Test it by typeing in each form field, then press enter and see how the cursor automatically goes to a new form field. This was created with a table, and the index numbers were created so that the cursor went down the column in the logical manner for entering the verb forms, rather than to the field on the right which would be the next field in the HTML document.