Yii2：动态获取字段的ID

Question

I am using the below code for auto-fill of data from another table, which is working well.

<?php
$this->registerJs("$('#otinstrumententry-0-instrument_name').on('change',function(){
    $.ajax({
        url: '".yii\helpers\Url::toRoute("ot-note/instrument")."',
        dataType: 'json',
        method: 'GET',
        data: {id: $(this).val(),
        },
        success: function (data, textStatus, jqXHR) {
            $('#otinstrumententry-0-instrument_code').val(data.instrument_code);
            },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log('An error occured!');
            alert('Error in ajax request');
        }
    });

});"); 
?>

The Problem I am now facing is I am adding the repeat fields, where the id is generated dynamically, so my solution above works for the first row only as for successive rows the id of the fields get changed like

#otinstrumententry-1-instrument_name and #otinstrumententry-2-instrument_name also #otinstrumententry-1-instrument_code and #otinstrumententry-2-instrument_code

How I can address this.

my code for adding the rows is like this:

    <div id="instrument_entry">
    <h3>Instruments Used</h3>
    <?php $id = 0; ?>

    <?php foreach ($otinstrumentModels as $otinstrument) { ?>      

    <div id="language" class="work-data-pad brdr-work marbtm10 row">
    <div class="col-md-4">     
    <?= $form->field($otinstument, '[' . $id . ']' . 'instrument_name')->DropDownList(ArrayHelper::map(\app\models\Instrument::find()->all(), 'id', 'instrument_name' ),
    [ 'prompt' => 'Please Select' ])?>    
    </div>
    <div class="col-md-2">     
    <?= $form->field($otinstrument, '[' . $id . ']' . 'instrument_code')->textInput(['maxlength' => 255]) ?>      
    </div>
    <div class="col-md-1">     
    <?= $form->field($otinstrument, '[' . $id . ']' . 'hrs_time')->textInput(['maxlength' => 255])->label('Hrs-Time') ?>      
    </div>
    <div class="col-md-2">     
    <?= $form->field($otinstrument, '[' . $id . ']' . 'total_charges')->textInput(['maxlength' => 255]) ?>      
    </div>
    <?php ?>
    <div style="margin-top: 30px;" class="col-md-3 <?php echo ($id < 1) ? 'dnone' : 'dblock'; ?>" id="divDelete" class="row-fluid">           
   <a class="ft11 btn-remove" onclick="deleteSection(this, 'instrument_entry');"><span class="marleft18">Remove</span></a>               
   </div>  
   </div>
   <?php $id++; ?> 
   <?php } ?>
   </div>

Thanks in advance for a suggestion or any alternative solution on this.

EDIT Initially the ajax was not firing at all for the subsequent fields, but after change the code - $this->registerJs("$(document).on('change','.form-control',function(event)

now it is sending the data, but I am still stuck to filling the data in the current fields as it is still not picking the dynamically added fields and the data is changed in the first row instead.

Answer 1

Add in all field css class. And $('.className').on('change'...