Jquery add 1 against each text input in yii2 dynamic form

Question

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.

as you said your logic is working and use go to 2 or 1 (mean previous filled value) line and change end value, then what happen? — Yatin Mistry
– Yatin Mistry, Commented Jul 18, 2020 at 14:42
Show your init html, also explain the exact logic what you trying to get. — Serghei Leonenco
– Serghei Leonenco, Commented Jul 19, 2020 at 0:40
you are binding the afterInsert on every click which is technically wrong , your afterInsert should be outside the click binding — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Jul 20, 2020 at 12:21
@MuhammadOmerAslam yes I have tried it outside the on click but still same result — Moeez
– Moeez, Commented Jul 20, 2020 at 15:02
@Faisal Please add a initial HTML code of the panel what you render from browser, with the wrapper div of all your panels. — Serghei Leonenco
– Serghei Leonenco, Commented Jul 21, 2020 at 3:07

Yatin Mistry · Accepted Answer · 2020-07-20 16:39:21Z

0

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

edited Jul 20, 2020 at 16:39

answered Jul 18, 2020 at 14:54

Yatin Mistry

1,2642 gold badges13 silver badges36 bronze badges

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

15 Comments

Moeez Over a year ago

slabEndValue is always empty. so no value is set for the start

Moeez Over a year ago

are you there still?

Moeez Over a year ago

var slabEndValue = $(".dynamicform_wrapper .js-slab-end:eq("+len+")").val(); console.log(slabEndValue); gives me empty result

Moeez Over a year ago

slabEndValue = parseInt(slabEndValue); console.log(slabEndValue); gives me NaN

Moeez Over a year ago

I have added my whole code for addBtn please see it

|

Serghei Leonenco · Accepted Answer · 2020-07-21 05:41:10Z

0

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

edited Jul 21, 2020 at 5:41

answered Jul 19, 2020 at 1:28

Serghei Leonenco

3,5272 gold badges11 silver badges17 bronze badges

10 Comments

Moeez Over a year ago

I have run the snippet and entered 100 in end text box and then pressed the add button. The next start should 101 but it's still 100

Moeez Over a year ago

Still the same result. It doesn't add +1 to the end value's

Serghei Leonenco Over a year ago

@Faisal I just checked and made it to be clear input names. Everything is working.

Moeez Over a year ago

your given example is working but I am still unable to figure it out with my issue.

Serghei Leonenco Over a year ago

@Faisal Have you typed anything in your initial input? Also i saw you have solved this issue in your other question is not it?

|

Collectives™ on Stack Overflow

Jquery add 1 against each text input in yii2 dynamic form

2 Answers 2

15 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related