Jquery add 1 against each text input in yii2 dynamic form

问题

I already have added one question related to it. But there is a little change this time.

I have a readonly text input with a default value 1.

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

Also, I have another text input which I am getting from the user

  <?= $form->field($modelTariffSlabs, "[{$i}]slab_end")->textInput(['maxlength' => 10]) ?>

What I want to do?

Whenever I press the add button, I want to add +1 to the slab_end text input and then assign it to my next slab_start input text.

What I have tried?

$("#addBtn").click(function(e)
{


$(".dynamicform_wrapper").on("afterInsert", function(e, item) {

$(".dynamicform_wrapper .js-slab-start").each(function(index) {
  
             var end = +$("#mdctariffslabs-0-slab_end").val()+1;
             
    $(this).val(end);
}); 
});
});

So I added 100 in slab_end input text, and when I press the add button It does add 1 in it but shows me 101 in my next slab_start and current slab_start.

1st Input (Before pressing add button)

After pressing add button

Here as shown in the above image. The start value of 1st level is changed when I press the add button also the start value has changed and the next value of start is 101 but on 3rd level, the start value should be 151 as I have added 150 in my previous end text input.

Update 1

Below is my addBtn jquery code

$("#addBtn").click(function(e)
{


$(".dynamicform_wrapper").on("afterInsert", function(e, item) {

   //console.log("after insert");
$(".dynamicform_wrapper .js-slab-name").each(function(index) {
             //console.log("set slab-name");
    $(this).val("S-" + (index + 1));
    
}); 

 var len = $(".dynamicform_wrapper .js-slab-end").length-1;
 console.log(len);  
 var slabEndValue = $(".dynamicform_wrapper .js-slab-end:eq("+len+")").val();

 slabEndValue = parseInt(slabEndValue);
 console.log(slabEndValue);
 $(".dynamicform_wrapper .js-slab-start:end").val(slabEndValue);

 });
 });
 });

Update 2

I have updated my code. Removed the addBtn event and simply placed the event afterInsert including the value incrementing logic. But still the result is same

<?PHP
$script = <<< JS
$(".dynamicform_wrapper").on("afterInsert", function(e, item) {

   //console.log("after insert");
$(".dynamicform_wrapper .js-slab-name").each(function(index) {
             //console.log("set slab-name");
    $(this).val("s-" + (index + 1));
    
}); 

 var len = $(".dynamicform_wrapper .js-slab-end").length-1;
 console.log(len);  
 var slabEndValue = $(".dynamicform_wrapper .js-slab-end:eq("+len+")").val();
 console.log(slabEndValue);
 slabEndValue = parseInt(slabEndValue);

 $(".dynamicform_wrapper .js-slab-start:end").val(slabEndValue);

 });

 $(".dynamicform_wrapper").on("afterDelete", function(e) {
 console.log("Deleted item!");
 });

 $(".dynamicform_wrapper").on("limitReached", function(e, item) {
 alert("Limit reached");
 });




 JS;
 $this->registerJs($script);
 ?>

Update 3

I have tried to run the jquery in the console window.

In the console, I am getting 100 but while in production I am getting nothing. Secondly, I want to +1 the value entered in end text box

Any help would be highly appreciated.

回答1:

add class js-slab-end

<?= $form->field($modelTariffSlabs, "[{$i}]slab_end")->textInput(['maxlength' => 10,"class"=>"js-slab-end"]) ?>

Jquery

$(".dynamicform_wrapper").on("afterInsert", function(e, item) {

    //Get Second last slab-end
    var len = $(".dynamicform_wrapper .js-slab-end").length - 1;
    var slabEndValue = $(".dynamicform_wrapper .js-slab-end:eq("+len+")").val();
    
    slabEndValue = parseInt(slabEndValue);

    $(".dynamicform_wrapper .js-slab-start:last").val(slabEndValue);
    
});

回答2:

Here what i think you can do:

This is a example how you can manage your problem

$(document).on('click', '#add', function(e){
  //get current template for append element
  var newPanel = $('.container .panel').html();
  //get total of childrens
  let lastChild = $('.container .panel').length;
  //get current panel start value
  let lastStartVal = $(this).parent().parent().find('form input#start').val();
  //get current panel end value
  let lastEndVal = $(this).parent().parent().find('form input#end').val();
  //check if the value is equal, if not increase +1
  //if(!lastStartVal ||lastStartVal === lastEndVal) lastEndVal++;//Encrease last value if it is not changed
  //append new panel
  $('.container').append('<div id="panel-'+ lastChild +'" class="panel"></div>');
  //append new panel html
  $('#panel-'+ lastChild +'').append(newPanel);
  var newPanel = $('#panel-'+ lastChild);
  //set values
  lastEndVal++;
  newPanel.find('form input#start').val(lastEndVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="panel-0" class="panel">
    <div id="panel-header">
      Panel
      <button id="add">Add</button>
    </div>
    <div id="panel-body">
      <form>
        <input id="start" name="start" value="" placeholder="Start" />
        <input id="end" name="end" value=""  placeholder="End" />
      </form>
    </div>
  </div>
</div>

Update i would use solution of @Yatin Mistry but with little changes:

$(".dynamicform_wrapper").on("afterInsert", function(e, item) {

    //Get Second last slab-end
    var len = $(".dynamicform_wrapper .container-items .item").length;
    var lastItemId = len - 1;
    var slabEndValue = $(".dynamicform_wrapper #mdctariffslabs-" + lastItemId + "-slab_end").val();
    //Check if the value is assigned
    if(!slabEndValue) slabEndValue = 0;
    //increase
    slabEndValue++;

    $(".dynamicform_wrapper .js-slab-start:last").val(slabEndValue);
    
});

来源：https://stackoverflow.com/questions/62969155/jquery-add-1-against-each-text-input-in-yii2-dynamic-form

标签

javascript

jquery

yii2

yii2-advanced-app

dynamicform