Yii2- insert value to text input field on button click via jquery

Question

I am working on yii2. I have created a dynamic form. I have some fields in it.

<div class="pull-right">
    <button type="button" id="addBtn" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
    <button type="button" id="remBtn" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="row">
    <div class="col-sm-3">
        <?= $form->field($modelTariffSlabs, "[{$i}]slab_name")->textInput(['readonly'=>true,'value'=>'S-1','maxlength' => 10]) ?>
    </div>
    <div class="col-sm-3">
        <?= $form->field($modelTariffSlabs, "[{$i}]slab_start")->textInput(['maxlength' => 10]) ?>
    </div>
    <div class="col-sm-3">
        <?= $form->field($modelTariffSlabs, "[{$i}]slab_end")->textInput(['maxlength' => 10]) ?>
    </div>
    <div class="col-sm-3">
        <?= $form->field($modelTariffSlabs, "[{$i}]rate")->textInput(['maxlength' => 10]) ?>
    </div>
</div><!-- .row -->

GUI

What I want to do?

I want to add the Slab Name automatically whenever I press the . So when the form is loaded for the first time the slab name should be S-1, when the add button is clicked and the new form is opened the slab name should be S-2 and so on.

Update 1 I have tried the following

1. Declared and initialized a variable to 1

2. Append this variable with the value

   <div class="col-sm-3">
                               <?= $form->field($modelTariffSlabs, "[{$i}]slab_name")->textInput(['readonly'=>true,'value'=>'S-'.$s,'maxlength' => 10]) ?>
                           </div>
   

I am able to get the value of text input via jquery.

$("#addBtn").click(function(e){
var value = $("#mdctariffslabs-0-slab_name").val();
alert(value);
    });

Update 2

I have tried @Yatin's solution

 <?= $form->field($modelTariffSlabs, "[{$i}]slab_name")->textInput(['readonly'=>true,'value'=>'S-1','maxlength' => 10,"class"=>"form-control js-slab-name"]) ?>

$("#addBtn").click(function(e)
{
  $(".dynamicform_wrapper").on("afterInsert", function(e, item) 
  {
    $(".dynamicform_wrapper .js-slab-name").each(function(index) {
    $(this).html("S-" + (index + 1));
   }); 
   });
   });
 });

Also, I have placed it outside the addBtn

$(".dynamicform_wrapper").on("afterInsert", function(e, item) 
 {
    $(".dynamicform_wrapper .js-slab-name").each(function(index) {
    $(this).html("S-" + (index + 1));
   }); 
   });
   });

It still not working.

Any help would be highly appreciated

Answer 1

If you are using wbraganca\dynamicform\DynamicFormWidget, then below code should works,

Take widgetContainer class

<?php DynamicFormWidget::begin([
        'widgetContainer' => "dynamicform_form_wrapper", <======= take class
        'widgetBody' => ".container-filter",
        'widgetItem' => ".filter-item",
        'limit' => 10,
        'min' => 1,
        'insertButton' => '.js-add-filter',
        'deleteButton' => '.js-remove-filter',
        'model' => $modelsCondition[0],
        'formId' => 'test-form',
        'formFields' => [
            'description'
        ],
    ]); ?>

Add class to your input field - js-slab-name

<?= $form->field($modelTariffSlabs, "[{$i}]slab_name")->textInput(['readonly'=>true,'value'=>'S-1','maxlength' => 10,"class"=>"form-control js-slab-name"]) ?>

Jquery to set your slab_name incremental

jQuery(".dynamicform_form_wrapper").on("afterInsert", function(e, item) {
    console.log("after insert");
    jQuery(".dynamicform_form_wrapper .js-slab-name").each(function(index) {
                 console.log("set slab-name");
        jQuery(this).val("S-" + (index + 1));
    }); 
});