Move the cursor to the next input form when you create a new one

Question

In a form, I want to create a new form input on enter action. I coded this which is working but the cursor doesn't go to the new created input and stays on the same..

How can I move the cursor to the added input;

var counter = 1;

$('#form')

  .on('keydown', function(e) {

    if (e.which == 13 || e.keyCode == 13) {

      e.preventDefault();



      counter++;

      var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()

        .find('.addInput').removeClass('addInput').addClass('removeInput').end()

        .find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()

        .find('i').removeClass('fa-plus').addClass('fa-minus').end();

      $template.insertAfter('.form-group:last');



    }



  })



  // Remove button click handler

  .on('click', '.removeInput', function() {

    var $row = $('.form-group').slice(-1);

    counter--;

    $row.remove();

  });

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>





<div class="row">

  <div class="col-md-12 col-sm-12">

    <form id="form" method="post" class="form-horizontal" role="form">

      <fieldset>



        <div class="form-group">

          <label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>

          <div class="col-md-2 col-sm-2">

            <input type="text" class="form-control" name="paleta-1" tabindex="1">

          </div>



          <div class="col-md-1 col-sm-1">

            <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>

          </div>



        </div>



        <div class="row">

          <div class="row myTop">

            <div class="col-md-1">

              <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>

            </div>

          </div>

        </div>



      </fieldset>





    </form>

  </div>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Try adding $('.form-control:last').focus(); on addInput click event.

Or find input by name as like below. Check the snippet for reference.

var inputName="paleta-"+counter;
$("input[name='"+inputName+"']").focus();

var counter = 1;

document.getElementById("form").onkeypress = function(e) {
  var key = e.charCode || e.keyCode || 0;
  if (key == 13) {
    addInput();
    e.preventDefault();
  }
}

$('#form').on('click', '.addInput', function() {
    addInput();
  })
  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-group').slice(-1);
    counter--;
    $row.remove();
  });

function addInput() {
  counter++;
  var $template = $('.form-group').slice(-1).clone(true, true).find('input').end()
    .find('.addInput').removeClass('addInput').addClass('removeInput').end()
    .find('[name^="paleta-"]').attr('name', 'paleta-' + counter).val("").attr('tabindex', counter).val("").end()
    .find('i').removeClass('fa-plus').addClass('fa-minus').end();
  $template.insertAfter('.form-group:last');
  var inputName = "paleta-" + counter;
  $("input[name='" + inputName + "']").focus();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 col-sm-12">
    <form id="form" method="post" class="form-horizontal" role="form">
      <fieldset>

        <div class="form-group">
          <label for="inputName" class="col-md-1 col-sm-1 control-label">Barcode</label>
          <div class="col-md-2 col-sm-2">
            <input type="text" class="form-control" name="paleta-1" tabindex="1">
          </div>

          <div class="col-md-1 col-sm-1">
            <button type="button" class="btn btn-default addInput"><i class="fa fa-plus"></i></button>
          </div>

        </div>

        <div class="row">
          <div class="row myTop">
            <div class="col-md-1">
              <button type="submit" name="formAction" value="next" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>

      </fieldset>


    </form>
  </div>
</div>

Move the cursor to the next input form when you create a new one

Sign up