yii2 동적 양식의 텍스트 상자 합계

Question

"금액"텍스트 상자의 모든 "가격"텍스트 상자의 합계를 얻으려고합니다. 가격 텍스트 상자는 ssgi_price이고 금액 텍스트 상자는 ssg_amount입니다. 가격 텍스트 상자에 값을 입력 할 때마다 가격 텍스트 상자의 합계가 금액 텍스트 상자에 채워집니다. 이미지 아래처럼

-

처럼 내 _form의 코드가 보인다 - 나는 시도하고

<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> 

그리고 자바 스크립트 -

<?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 */ 
?> 

내가지고있어 오류를 -

Imp

먼저 귀하의 입력에 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']) ?> 

을 다음 등록 다음 lementing 코스타스의 솔루션

Answer 1

당신은 다음을 사용할 수 있습니다 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 */ 
?>