yii2の動的フォームのテキストボックスの合計

Question

"金額"のテキストボックスのすべての "価格"テキストボックスの合計を取得しようとしています。 priceのテキストボックスはssgi_priceで、Amountのテキストボックスはssg_amountです。 価格テキストボックスに値を入力するたびに、すべての価格テキストボックスの合計が[料金]テキストボックスに表示されます。画像以下のように

- 私がしようとしている

<div class="container-items"><!-- widgetContainer --> 
      <?php foreach ($modelsSellitemsg as $i => $modelSellitemsg): ?> 
       <div class="item panel panel-default"><!-- widgetBody --> 
        <div class="panel-body"> 
         <?php 
          // necessary for update action. 
          if (! $modelSellitemsg->isNewRecord) { 
           echo Html::activeHiddenInput($modelSellitemsg, "[{$i}]id"); 
          } 
         ?> 
         <div class="row"> 
          <div class="col-sm-6"> 
           <?= $form->field($modelSellitemsg, "[{$i}]ssgi_sgname")->label(false)->widget(Select2::classname(), [ 
            'data' => ArrayHelper::map(Sunglass::find()->all(),'sg_name','sg_name'), 
            'language' => 'en', 
            'options' => ['placeholder' => 'Select Sunglass'], 
            'pluginOptions' => [ 
             'allowClear' => true 
            ], 
            ]); 
           ?> 
          </div> 
          <div class="col-sm-3"> 
           <?= $form->field($modelSellitemsg, "[{$i}]ssgi_price")->textInput([ 
           'maxlength' => true, 
           'onfocus'=>'sum()', 'onBlur'=>'sum()']) ?> 
          </div> 
          <div class="col-sm-3"> 
           <div class="pull-right"> 
            <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button> 
            <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button> 
           </div> 
          </div> 
         </div><!-- .row --> 
        </div> 
       </div> 
      <?php endforeach; ?> 
      </div> 
      <?php DynamicFormWidget::end(); ?> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-lg-12"> 
      <div class="form-group"> 
       <div class="col-xs-6 col-sm-6 col-lg-6"> 

       </div> 
       <div class="col-xs-3 col-sm-3 col-lg-3"> 
        <?= $form->field($model, 'ssg_amount')->textInput() ?> 
       </div> 
       <div class="col-xs-3 col-sm-3 col-lg-3"> 

       </div> 
      </div> 
     </div> 
    </div> 

とJavaScript - -

<?php 
/* start getting the totalamount */ 
$script = <<<EOD 
    $(function sum(){ 
    id = 0; 
    suma = 0; 
    existe = true; 
    while(existe){ 
     var idFull = "#sellsg-"+id+"-ssgi_price"; 
     try{campo = document.getElementById(idFull); 
      if(document.getElementById(idFull).value!=''){ 
      suma = suma + parseInt(document.getElementById(idFull).value); 
      } 
      id = id+1; 
     }catch(e){ 
      existe = false; 
     } 
     $('#sellsg-ssg_amount').val(suma); 
    } 
    }); 
EOD; 
$this->registerJs($script); 
/*end getting the totalamount */ 
?> 

私は取得していますエラー - 私_formの

コードは次のようになります

Impコスタスのソリューション

Answer 1

をlementingあなたは以下のように使用することができます。

まず、あなたの入力にCSSクラスを与える：

<div class="col-sm-3"> 
    <?= $form->field($modelSellitemsg, "[{$i}]ssgi_price")->textInput([ 
    'maxlength' => true, 
    'class' => 'sumPart']) ?> 
</div> 

と

<?= $form->field($model, 'ssg_amount')->textInput(['class' => 'sum']) ?> 

を次に以下を登録jQuery：

<?php 
/* start getting the totalamount */ 
$script = <<<EOD 
    var getSum = function() { 

     var items = $(".item"); 
     var sum = 0; 

     items.each(function (index, elem) { 
      var priceValue = $(elem).find(".sumPart").val(); 
      //Check if priceValue is numeric or something like that 
      sum = parseInt(sum) + parseInt(priceValue); 
     }); 
     //Assign the sum value to the field 
     $(".sum").val(sum); 
    }; 

    //Bind new elements to support the function too 
    $(".container-items").on("change", ".sumPart", function() { 
     getSum(); 
    }); 
EOD; 
$this->registerJs($script); 
/*end getting the totalamount */ 
?>