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

Declared and initialized a variable to 1

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

@Faisal Your update does not show any try to append a new row. My answer here may be help for you: stackoverflow.com/questions/62856054/… — Serghei Leonenco
– Serghei Leonenco, Commented Jul 16, 2020 at 4:10
@SergheiLeonenco I will look into it. But I have a question. The input boxes are in a panel box. So every time when I click the add button a new panel is created — Moeez
– Moeez, Commented Jul 16, 2020 at 4:55
@Faisal my answer working with table rows. Also if you know Jquery, you will find the way how to track new panels and set a desired table row inputs needed properties. — Serghei Leonenco
– Serghei Leonenco, Commented Jul 16, 2020 at 4:57
@Faisal My answer is just a way how you can implement that, but not a solution for your problem. — Serghei Leonenco
– Serghei Leonenco, Commented Jul 16, 2020 at 4:59

Yatin Mistry · Accepted Answer · 2020-07-18 09:56:46Z

1

+50

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));
    }); 
});

edited Jul 18, 2020 at 9:56

answered Jul 17, 2020 at 14:25

Yatin Mistry

1,2642 gold badges13 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Moeez Over a year ago

I have tried your code but still its not working

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

Yatin Mistry Over a year ago

@Faisal check updated jquery jQuery(this).val("S-" + (index + 1));

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related