HTML Form - Script To add New Table Row and set focus on first input-CodePudding

I have a simple table with 2 text inputs and a script that runs when the first input field is modified which queries a database and then updates the other 3 cells in the same row. It also adds a new blank row at the end of the table.

I'd would now like to put the user's cursor inside the first input field of the newly created table row to save them having to click into this manually (they will be using a barcode scanner so hands won't always be on the keyboard/mouse here).

Here's my table/scripts:

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);
  });

  // Find and remove selected table rows

  $("#shipmentItems").on("click", ".deleteRow", function() {
    $(this).closest('tr').remove();
  });
});

$(document).ready(function() {
  $(document).on('change', '.form-control.serialNumber', function() {

    var serialNumber = $(this).val();
    //console.log( recid );
    // Create a reference to $(this) here:
    $this = $(this);

    ID = 'ABC123';
    code = 'PC8765';
    description = 'Acme Standard Widget';

    $this.closest('tr').find('.form-control.assetID').val(ID);
    $this.closest('tr').children('.code').html(code);
    $this.closest('tr').children('.description').html(description);

    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table id="shipmentItems" >
  <thead>
    <th  scope="col" width="20%">Serial</th>
    <th  scope="col" width="15%">ID</th>
    <th  scope="col" width="15%">Code</th>
    <th  scope="col" width="45%">Description</th>
    <th  scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"  autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td ></td>
      <td ></td>
      <td ><span ></span></td>
    </tr>
  </tbody>
</table>

<button type="button" name="addRow" value="addRow" id="addRow" >Add Asset</button> &nbsp; &nbsp;

At present is creates the new row successfully but I can't find the correct syntax to place focus on the first input in the newly created row.

CodePudding user response：

you can add this code:

$('input[name="serialNumber[]"]').last().focus();

after this line

$("#shipmentItems").append(markup);

CodePudding user response：

Place the following line within the eventHandler of the #addRow button. Also just outside the eventHandler if you want the first input to be selected initally when the page loads.

$('tr').last().find('td:first-of-type input').focus();

The lines are commented in the code below:

$(document).ready(function() {
  $("#addRow").click(function() {
    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);

    // This will focus on the new input on every click 
    $('tr').last().find('td:first-of-type input').focus();

  });
  /*
  This line is added if the input is selected on page load
  */
  $('tr').last().find('td:first-of-type input').focus();



  $("#shipmentItems").on("click", ".deleteRow", function() {
    $(this).closest('tr').remove();
  });
});

$(document).ready(function() {
  $(document).on('change', '.form-control.serialNumber', function() {

    var serialNumber = $(this).val();
 
    $this = $(this);

    ID = 'ABC123';
    code = 'PC8765';
    description = 'Acme Standard Widget';

    $this.closest('tr').find('.form-control.assetID').val(ID);
    $this.closest('tr').children('.code').html(code);
    $this.closest('tr').children('.description').html(description);

    var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
    $("#shipmentItems").append(markup);

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<table id="shipmentItems" >
  <thead>
    <th  scope="col" width="20%">Serial</th>
    <th  scope="col" width="15%">ID</th>
    <th  scope="col" width="15%">Code</th>
    <th  scope="col" width="45%">Description</th>
    <th  scope="col" width="5%"></th>
  </thead>
  <tbody>
    <tr>
      <td><input type="text"  autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
      <td ></td>
      <td ></td>
      <td ><span ></span></td>
    </tr>
  </tbody>
</table>

<button type="button" name="addRow" value="addRow" id="addRow" >Add Asset</button> &nbsp; &nbsp;