Php- input text box auto focus not working

Question

I have two input tex boxes . I want them to be autofocus when the entry is done in the first text box then the autofocus should be shifted towards the other one. I have used this solution , but it's not working for me. My view is bellow.

Update

<div class="meter-to-sim-mapping-form">

<?php $form = ActiveForm::begin(['id'=>'simmapping-form','options' => ['enctype' => 'multipart/form-data']]); ?>

<?php  if($model->isNewRecord){?>
    <label class="control-label">Select Meter #</label><br />
    <input type="text" id="the-meter-id" class="form-control col-md-12"  value="<?=$model->meter_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_meters_container" ></div>
    <div style="clear: both;"></div>

    <label class="control-label">Select IMSI #</label><br />
    <input type="text" id="the-sim-id" class="form-control col-md-12" value="<?=$model->sim_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_imsi_container" ></div>
    <div style="clear: both;"></div>
<?php } ?>

<?= $form->field($model, 'imsi')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_number')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'operator_name')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'meter_msn')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_status')->dropDownList(\app\models\AccurateBase::simstatusArray())?>

<?= $form->field($model, 'historic')->textInput(['readonly' => 'readonly']) ?>

<div class="form-group">
    <a class="btn btn-default" onclick="window.history.back()" href="javascript:;"><i
                class="fa fa-close"></i>
        Cancel</a>
    <a class="<?= $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary' ?>" onclick="
      $('#simmapping-form').submit();" href="javascript:;">
        <?= $model->isNewRecord ? 'Create' : 'Update' ?></a>
</div>

<?php ActiveForm::end(); ?>

JS

$(document).ready(function() {
  var surveyReferences = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('imsi'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'survey',
    remote: {
      url: '$urlsim?q=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#the-sim-id').typeahead(null, {
    limit: 50,
    name: 'ref-numbers',
    display: 'imsi',
    source: surveyReferences,
    suggestion: function(data) {
      return '<p><strong>' + data.id + '</strong> – ' + data.imsi + '</p>';
    }
  });
  jQuery('#the-sim-id').on('typeahead:selected', function(e, datum) {
    $('#selected_imsi_container').html('');
    $('#metertosimmapping-imsi').val('');
    $('#metertosimmapping-sim_number').val('');
    $('#metertosimmapping-operator_name').val('');
    //$('#metertosimmapping-sim_status').val(datum.sim_status);
    $('#metertosimmapping-historic').val(datum.historic);
    var html = '<div class="selected-imsi"><input type="hidden" name="selected_imsi[]" value="' + datum.id + '" />' + datum.imsi + '<a onclick="$(this).closest(\'.selected-imsi\').remove()">X</a></div>';
    $('#selected_imsi_container').append(html);
    $('#metertosimmapping-imsi').append(datum.imsi);
    $('#the-sim-id').typeahead('val', '');
    $('#metertosimmapping-sim_number').val(datum.sim_number);
    $('#metertosimmapping-operator_name').val(datum.operator_name);
    //$('#metertosimmapping-sim_status').val(datum.sim_status);
    $('#metertosimmapping-historic').val(datum.historic);
  });


  // for meters see below ****************************************************

  var surveyReference = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('meter_msn'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'survey',
    remote: {
      url: '$urlmeters?q=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#the-meter-id').typeahead(null, {
    limit: 50,
    name: 'ref-numbers',
    display: 'meter_msn',
    source: surveyReference,
    suggestion: function(data) {
      return '<p><strong>' + data.id + '</strong> – ' + data.meter_msn + '</p>';
    }
  });
  jQuery('#the-meter-id').on('typeahead:selected', function(e, datum) {
    $('#selected_meters_container').html('');
    $('#metertosimmapping-meter_serial').val('');
    var html = '<div class="selected-meter"><input type="hidden" name="selected_meters[]" value="' + datum.id + '" />' + datum.meter_msn + '<a onclick="$(this).closest(\'.selected_meters\').remove()">X</a></div>';
    $('#selected_meters_container').append(html);
    $('#metertosimmapping-meter_serial').append(datum.meter_msn);
    $('#the-meter-id').typeahead('val', '');
    // $('#metersinventorystore-historic').val(datum.historic);
  });

});

I am using typeahead. For any value entered in the text box, a autocomplete list is viewed as below

And after selecting it is displayed like below

Same is the case for IMSI #

How can I achieve it? Any help will be highly appreciated

Answer 1

Ok, i have solved the problem by doing things below.

Added the autofocus attribute in input tag.

<input type="text" id="the-meter-id" class="form-control col-md-12"  autofocus value="<?=$model->meter_id?>"/>

This will by default but the cursor on the first text box.

After that in javascript

 jQuery('#the-meter-id').on('typeahead:selected', function (e, datum) { 
      $('#selected_meters_container').html('');
      $('#metertosimmapping-meter_serial').val('');
      $('#the-sim-id').focus();
      .
      .
      .
      .
});

On selecting a meter number the autofocus will shift to the IMSI# input box.

Answer 2

If you are using Yii2 with ActiveForm all you need to is use the autofocus and tabindex property of inputOptions like below.

$form->field($model, 'location', [
 'inputOptions' =>
    [
      'autofocus' => 'autofocus',
      'tabindex' => '1',
    ]
])->textInput();

You can use 'tabindex' => '2', for the next input to be focused.