Question

我在yii2中有一个表单。在那里我有一个输入字段，如下所示。

<input type="text" class="form-control" id="productsales-<?= $i ?>-value">

它在一个动态的形式内，并不来自任何模型。它只是保留一些计算值。我们的想法是将此字段中用户提交的值计算到另一个文本框中，如下所示 -

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

我已经有了javascript代码来计算总金额，如下所示 -

<?php
/* start getting the total amount */
$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 = (parseFloat(sum) + parseFloat(priceValue)).toFixed(2);
        });
        //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 total amount */
?>

请注意，我在第二个文本框中有一个类sum来自模型。我的问题是如何在第一个文本框中添加一个类（sumPart），而不是来自模型。

与Insane Skull讨论后更新

我有一个像下面这样的动态表单我想计算Value中所有条目的总和并将其传递给amount。

价值代码是 -

sum

Amount的代码是 -

<input type="text" class="form-control sumPart" id="productsales-<?= $i ?>-value">

上面已经给出了我尝试过的javascript。此代码的问题是计算的“值”未传递给金额文本框。

更新：一个小问题

Answer 1

修改JS：

$this->registerJs('
    function getSum() {
        var sum = 0;
        var items = $(".item");
        items.each(function (index, elem) {
            var priceValue = $(elem).find(".sumPart").val();
            sum = parseFloat(sum) + parseFloat(priceValue);
        });

       if(isNaN(sum) || sum.length == 0) {
           sum = 0;
       }
       $(".sum").val(sum);
    }

    $(".container-items").on("change", function() {
        getSum();
    });

    jQuery(".dynamicform_wrapper").on("afterDelete", function(e) {
        getSum();
    }); 
');

Answer 2

我不确定你面临的问题。如果要将类添加到输入字段，可以在输入标记的class属性中轻松执行此操作。 class属性确实支持多个值，因此您可以编写如下内容：

<input type="text" class="form-control sumPart" id="productsales-<?= $i ?>-value">

**更新 - 基于OP **的评论

@Tanmay，我知道您可能无法获得所需的输出。但是，如果我们使用$form->field()或纯HTML来渲染字段，那就不重要了。如果字段分配了正确的类，则Kostas在您引用的链接中发布的JS代码应该有效 - 无论类名如何添加到输入字段。

如果页面加载后，sumPart类是否实际分配给相关字段，是否可以确认（使用Inspect Element）？也许有些JS会再次覆盖class属性？

如果正确分配了类，请检查控制台中是否存在任何其他JS错误，这可能会妨碍总和计算JS正常工作。

将类添加到bootstrap文本框 - yii2

2 个答案: