Tanmay Tanmay - 3 months ago 25
Javascript Question

Sum of textboxes in yii2 dynamic form

I'm trying to get sum of all the "Price" textboxes in another textbox "Amount".
The textbox for price is ssgi_price and the textbox for Amount is ssg_amount.
The intention is whenever I put some value in the Price Textbox, the sum of all price textboxes should populate in the Amount textbox.

Like below image - enter image description here

Code of my _form looks like -

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


And the Javascript I'm trying -

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


The error I'm getting -
enter image description here

After Implementing Kostas's Solution

enter image description here

Answer

You can use the following:

First give a CSS class to your inputs:

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

and

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

Then register the following jQuery:

$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);
Comments