根据在yii2中输入的值更新金额和总计字段

Question

我正在yii2的发票上工作。使用items动态添加了wbraganca\dynamicform\DynamicFormWidget发票。这些项目均具有quantity和price输入，并且amount会根据quantity和price的值自动更新。发票底部是total，它是发票中每个amount的{​​{1}}的总和。当任何输入字段（item和total发生变化时，quantity字段也会自动更新。我尝试过提供一个price代码，但我只是更新了第一项Javascript，但其余的都没有用。以下是我的表格代码......

amount

_form.php

具体来说，这是<?php use yii\helpers\Html; use kartik\widgets\ActiveForm; use wbraganca\dynamicform\DynamicFormWidget; use kartik\widgets\DatePicker; use yii\helpers\Url; use yii\helpers\ArrayHelper; use app\models\Tenant; use app\models\InvoiceItems; use app\models\FinancialAccounts; /* @var $this yii\web\View */ /* @var $model app\models\Invoices */ /* @var $form yii\widgets\ActiveForm */ ?> <?php /* start getting the totalamount */ $script = <<<EOD var getAmount = function() { var qnty = $(".qnty").val(); var price = $(".price").val(); var amount = 0; amount = parseInt(qnty) * parseInt(price); //Assign the sum value to the field $(".amount").val(amount); }; $(".price").on("change", function() { getAmount(); }); EOD; $this->registerJs($script); /*end getting the totalamount */ ?> <div class="invoices-form"> <?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?> <fieldset> <legend>Invoice Details</legend> <div class="form-group kv-fieldset-inline"> <div class="col-sm-3"> <?= $form->field($modelInvoice, 'tenant_id')->dropDownList(ArrayHelper::map(Tenant::find()->select(['tenant_id', 'first_name', 'last_name', 'address'])->all(), 'tenant_id', 'displayName'), [ 'prompt'=>'Select Tenant', 'class' => 'form-control inline-block', 'onchange'=>' $.post( "'.Yii::$app->urlManager->createUrl('lease/list-lease?tenant_id=').'"+$(this).val(), function( data ) { $( "select#lease" ).html( data ); }); ' ]) ?> </div> <div class="col-sm-3"> <?php $dataLease=ArrayHelper::map(\app\models\Lease::find()->asArray()->all(), 'lease_id', 'leaseDetails'); echo $form->field($modelInvoice, 'lease') ->dropDownList( $dataLease, ['id'=>'lease'] ); ?> </div> <div class="col-sm-3"> <?= $form->field($modelInvoice, 'date')->widget(DatePicker::classname(), ['options' => ['placeholder' => 'Enter Invoice date ...'], 'pluginOptions' => ['autoclose'=>true, 'format' => 'yyyy-mm-dd', 'endDate' => '0d']]) ?> </div> <div class="col-sm-3"> <?= $form->field($modelInvoice, 'due_date')->widget(DatePicker::classname(), ['options' => ['placeholder' => 'Enter due date ...'], 'pluginOptions' => ['autoclose'=>true, 'format' => 'yyyy-mm-dd', 'startDate' => '0d']]) ?> </div> <div class="col-sm-3"> <?= $form->field($modelInvoice, 'invoice_number')->textInput(['maxlength' => true]) ?> </div> </div> </fieldset> <fieldset> <legend>Invoice Line Items</legend> <?php DynamicFormWidget::begin([ 'widgetContainer' => 'dynamicform_wrapper', 'widgetBody' => '.container-items', 'widgetItem' => '.invoice-item', 'limit' => 10, 'min' => 1, 'insertButton' => '.add-item', 'deleteButton' => '.remove-item', 'model' => $modelsInvoiceItem[0], 'formId' => 'dynamic-form', 'formFields' => [ 'Items', ], ]); ?> <table class="table table-bordered table-striped"> <thead> <tr> <th>Invoice Item</th> <th>Description</th> <th>Quantity</th> <th>Price (Kshs)</th> <th>Account</th> <th>Amount</th> <th class="text-center" style="width: 5%;"> <button type="button" class="add-item btn btn-success btn-xs"><span class="fa fa-plus"></span></button> </th> </tr> </thead> <tbody class="container-items"> <?php foreach ($modelsInvoiceItem as $indexItem => $modelInvoiceItem): ?> <tr class="invoice-item"> <td class="vcenter"> <?php // necessary for update action. if (! $modelInvoiceItem->isNewRecord) { echo Html::activeHiddenInput($modelInvoiceItem, "[{$indexItem}]id"); } ?> <?= $form->field($modelInvoiceItem, "[{$indexItem}]item_id")->label(false)->dropDownList(ArrayHelper::map(InvoiceItems::find()->select(['item_id', 'item'])->all(), 'item_id', 'item'),['class' => 'form-control inline-block', 'prompt'=>'Select Invoice Item']) ?> </td> <td class="vcenter"> <?= $form->field($modelInvoiceItem, "[{$indexItem}]desc")->label(false)->textInput(['maxlength' => true]) ?> </td> <td class="vcenter"> <?= $form->field($modelInvoiceItem, "[{$indexItem}]qnty")->label(false)->textInput(['class' => 'qnty']) ?> </td> <td class="vcenter"> <?= $form->field($modelInvoiceItem, "[{$indexItem}]price")->label(false)->textInput(['class' => 'price']) ?> </td> <td class="vcenter"> <?= $form->field($modelInvoiceItem, "[{$indexItem}]account_id")->label(false)->dropDownList(ArrayHelper::map(FinancialAccounts::find()->select(['account_id', 'account_name'])->all(), 'account_id', 'account_name'),['class' => 'form-control inline-block', 'prompt'=>'Select Account']) ?> </td> <td class="vcenter"> <?= $form->field($modelInvoiceItem, "[{$indexItem}]amount")->label(false)->textInput(['class'=>'amount','readOnly'=> true]) ?> </td> <td class="text-center vcenter" style="width: 5%; verti"> <button type="button" class="remove-item btn btn-danger btn-xs"><span class="fa fa-minus"></span></button> </td> </tr> <?php endforeach; ?> </tbody> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>Total</td> <td class="total"> <?= $form->field($modelInvoice, "total")->label(false)->textInput(['class'=>'total','readOnly'=> true]) ?> </td> <td></td> </tr> </tbody> </table> <?php DynamicFormWidget::end(); ?> </fieldset> <div class="col-sm-offset-3 col-sm-9"> <?= Html::submitButton($modelInvoice->isNewRecord ? 'Create' : 'Update', ['class' => $modelInvoice->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> <?= Html::resetButton('Reset', ['class' => 'btn btn-default']) ?> </div> <?php ActiveForm::end(); ?> </div> 代码

Javascript

以下是我正在使用的表单的屏幕截图：

我对<?php /* start getting the totalamount */ $script = <<<EOD var getAmount = function() { // var items = $(".item"); // var qnty = $(elem).find(".qnty").val(); var qnty = $(".qnty").val(); var price = $(".price").val(); // var price = $(elem).find(".price").val(); var amount = 0; amount = parseInt(qnty) * parseInt(price); // 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 $(".amount").val(amount); }; //Bind new elements to support the function too $(".price").on("change", function() { getAmount(); }); EOD; $this->registerJs($script); /*end getting the totalamount */ ?> 并不擅长，因此我不了解大部分代码，但我得到了想法和信息流。请帮助我在这里做些什么。 感谢。

Answer 1

您在类选择器中使用$ sign（＆＃34; .class＆＃34;）。所以你得到了回报。

jQuery val方法：

  

获取匹配元素集中第一个元素的当前值或设置每个匹配元素的值。

您可以使用行索引使不同的元素唯一。

尝试

$(".price").on("change", function(event) {
    getAmount(event);
});

function getAmount(event) {
    var priceElement = event.target;
    // extract row index from priceElement's id
    // use row index to find elements with id selector ("#elementId")
};

Answer 2

基于上面的@Sui Dream解决方案，以及研究互联网上的其他地方，这是我最终能够做到的。我只更新了脚本，一切正常：

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

        var items = $(".invoice-item");
        var amount = 0;
        var total = 0;

        items.each(function (index, elem) {
            var qnty = $(elem).find(".qnty").val();
            var price = $(elem).find(".price").val();
            //Check if qnty and price are numeric or something like that
            amount = parseInt(qnty) * parseInt(price);

            //Assign the amount value to the field
            $(elem).find(".amount").val(amount);

            var amountValue = $(elem).find(".amount").val();

            total = parseInt(total) + parseInt(amountValue);

            $(".total").val(total);
        });
    };

    //Bind new elements to support the function too
    $(".container-items").on("change", function() {
        getAmount();
    });
EOD;

$this->registerJs($script);
?>