Question

126

Activating next input field in form on enter

rated 0 times [ 131] [ 5] / answers: 1 / hits: 45640 / 11 Years ago, sat, october 26, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

turnerf

Add To Favorites

Follow

Total Points: 620

Total Questions: 101

Total Answers: 109

Location: French Polynesia

Member since Tue, Jul 7, 2020

4 Years ago

turnerf questions

1 Cannot read properties of undefined (reading 'display')

Thu, Oct 7, 21, 00:00, 3 Years ago

1 How should I import JSON in Node?

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to call a function every x seconds with updated state (React)

Tue, Jul 28, 20, 00:00, 4 Years ago

1 NestJS/swagger: what model is the ApiExtraModel expecting as a parameter?

Fri, Apr 10, 20, 00:00, 4 Years ago

1 TypeError: Cannot destructure property id of req.params as it is undefined

Sat, Apr 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago brittanye · Accepted Answer

The problem is that the next input is sometimes a button. Here is a JS Fiddle with a possible solution:

http://jsfiddle.net/hxZSU/1/

I've added a data attribute to the html elements that are inputs for the user. The attribute also contains an incrementing index so that you can control the order of the elements receiving focus.

Here are the HTML changes:

<input class='ui-widget-content ui-corner-all form-fullwidth' data-index=1 id='Tasudok' name='Tasudok' value='' maxlength='25' />

<input type=text name=Toode class=my-input data-index=2 />

<input type=number name=Kogus data-index=3 />

Here is the new JavaScript event that will move between the input fields. It will determine the index of the element is currently being edited by using $(event.target).attr('data-index'). It increments the index and selects the next element using this.

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

    if (event.which == 13) {

        event.preventDefault();

        var $this = $(event.target);

        var index = parseFloat($this.attr('data-index'));

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

    }

});