ผลรวมของกล่องข้อความในรูปแบบไดนามิก yii2

ฉันกำลังพยายามหาผลรวมของกล่องข้อความ "ราคา" ทั้งหมดในกล่องข้อความ "จำนวน" อื่น กล่องข้อความสำหรับราคาคือ ssgi_price และกล่องข้อความสำหรับ Amount คือ 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>

และ 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 */
?>

ข้อผิดพลาดที่ฉันได้รับ - ป้อนคำอธิบายรูปภาพที่นี่

หลังจากใช้โซลูชันของ Kostas

ป้อนคำอธิบายรูปภาพที่นี่


person Alias    schedule 28.08.2016    source แหล่งที่มา


คำตอบ (1)


คุณสามารถใช้สิ่งต่อไปนี้:

ขั้นแรกให้คลาส 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 */
?>
person Kostas Mitsarakis    schedule 28.08.2016
comment
สวัสดี Kostas ฉันได้ลองวิธีแก้ปัญหาของคุณแล้ว ฉันคิดว่ามีบางอย่างผิดปกติ ฉันได้อัปเดตผลลัพธ์ปัจจุบันในคำถามแล้ว กรุณาดู. - person Alias; 28.08.2016
comment
ใช่ คุณต้องแปลงค่าเป็นจำนวนเต็ม ลองคำตอบที่อัปเดตแล้วมันจะได้ผล - person Kostas Mitsarakis; 28.08.2016
comment
หากคุณต้องการให้ลอยเป็นวงกลม คุณสามารถใช้ฟังก์ชันต่อไปนี้: Developer.mozilla.org/en/docs/Web/JavaScript/Reference/ - person Kostas Mitsarakis; 28.08.2016