Activating next input field in form on enter

Order entry form contains product code and quantity columns in multiple rows and delete button (-) in end of every row. It contains also add button in first column and after form.

Pressing enter key should set focus to next text or numeric input field (product code or quantity), skipping buttons.

I tried code below is used but enter key is ignored.

Chrome debugger shows that line $(this).next('input').focus() is executed but focus() call does not have any effect.

jquery, jquery-mobile, ASP.NET MVC4 are used

<!DOCTYPE html>
<html>
<head>
  <script src="/Scripts/jquery/jquery-1.9.1.js"></script>
</head>
<body>
  <div data-role="page" data-theme="a">
 <div data-role="content">
<script>
  $(function () {
    $('#inputform').on('keydown', 'input', function (event) {
      if (event.which == 13) {
        $(this).next('input').focus();
        event.preventDefault();
      }
    });
  });
</script>
<form id='inputform' method="post" 
   action ="/Detail/SaveFullDocument?_entity=DokG&amp;_id=0">
  <fieldset>
<div class='form-field' >
<label class='form-label' for='Tasudok'>Order number</label>
<input class='ui-widget-content ui-corner-all form-fullwidth'  id='Tasudok' name='Tasudok'  value=''  maxlength='25' /></div>

  <input type="hidden" name="_rows" />

  <table id="tableId">
    <tr>
      <th>Product code</th>
      <th>Quantity</th>
      <td>
        <input type="button" value="+" onclick="addRow('tableId')" /></td>
    </tr>

    <tr>
      <td>
        <input type="text" name="Toode" /></td>
      <td>
        <input type="number" name="Kogus" /></td>
      <td>
        <input type="button" value="-" onclick="deleteRow(this)" /></td>
    </tr>
  </table>

    <input type="button" value="+" onclick="addRow('tableId')" />
    <input type="submit" value='Save order' />
</form>

    </div>
  </div>
</body>
</html>

Solution

Update Nov 2024:

This question and the accepted answer are old. Most of us aren't using JQuery anymore.

Here's a more modern answer using Vanilla JavaScript:

My solution would work:

on any kind of form
only for input fields
form is submitted (or any other default action happens) when Enter key is pressed on the last input field.

Create the function:


const moveToNextInputFieldOnEnter = (event: KeyboardEvent) => {
    if (event.code === "Enter") {
        const currentInput = event.target as HTMLInputElement;
        if (currentInput.nodeName != "INPUT") return;

        const form = currentInput.form;
        if (!form) return;

        const formInputs = Array.from(form).filter(
            (element) => element.nodeName === "INPUT"
        ) as HTMLInputElement[];

        const nextInputIndex = formInputs.indexOf(currentInput) + 1;
        if (nextInputIndex >= formInputs.length) return;

        const nextInput = formInputs[nextInputIndex];

        nextInput.focus();
        event.preventDefault();
    }
};

Then add event listener:


document.addEventListener("keydown", moveToNextInputFieldOnEnter);

If using React, add in a useEffect:


// move to next input field on enter key press
    useEffect(() => {
        document.addEventListener("keydown", moveToNextInputFieldOnEnter);

        return () => {
            document.removeEventListener(
                "keydown",
                moveToNextInputFieldOnEnter
            );
        };
    }, []);