Javascript 如何使用wbraganca-yii2-dynamicform对动态字段求和？

我是新来的。 我需要帮助。我使用了一个名为“wbraganca/yii2 dynamicform”的插件。 我有一个允许两个字段（caja1和caja2）之和的表单，加法的结果是“total”。 这很有效。 但是当我使用“

添加行

”按钮时，我遇到了一个问题。这些字段不允许添加。 只有第一行有效，但新行无效。 如何使它也动态工作

多谢各位

我的看法

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\jui\JuiAsset;
use yii\web\JsExpression;
use kartik\widgets\FileInput;
use app\modules\yii2extensions\models\Image;
use wbraganca\dynamicform\DynamicFormWidget;
use yii\helpers\Url;

?>

<script>

function Totales() {

with (document.forms["dynamic-form"]) 
               {
        var totalResult = Number( caja1.value ) + Number( caja2.value );

        total.value = totalResult;
                }
}

</script>


<br>
<center><h2>Details</h2></center>
<br><br><br>

<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>

<?= $form->field($modeli, 'form1')->hiddenInput(['value' => 'formito1'])->label(false); ?>


    <div id="panel-option-values" class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-check-square-o"></i><b>Personal Externo</b></h3>
    </div></br>

    <?php DynamicFormWidget::begin([
        'widgetContainer' => 'dynamicform_wrapper1',
        'widgetBody' => '.form-options-body1',
        'widgetItem' => '.form-options-item1',
        'limit' => 3,
        'min' => 1,
        'insertButton' => '.add-item',
        'deleteButton' => '.delete-item',
        'model' => $modelsPoItem[0],
        'formId' => 'dynamic-form',
        'formFields' => [
            'nombre',
            'tipop',
            'horas', 
            'valorhora', 
            'total', 
        ],
    ]); ?>
    <table class="table table-bordered table-striped margin-b-none">
        <div style="margin-left: 10px;">
        <button type="button" class="add-item btn btn-success btn-sm"><span class="fa fa-plus"></span>+ Add Rows</button><br></br>
        </div>
        <thead>
            <tr>
                <th style="width: 10px; text-align: center"></th> 
                <th style="width: 40px; text-align: center">Name</th>
                <th style="width: 40px; text-align: center">Tipe</th>
                <th style="width: 40px; text-align: center">H-H</th>
                <th style="width: 40px; text-align: center">Value H-H ($)</th>
                <th style="width: 40px; text-align: center">Total ($)</th>
                <th style="width: 40px; text-align: center">Edit</th>
            </tr>
        </thead>

        <tbody class="form-options-body1">
            <?php foreach ($modelsPoItem as $index => $modelOptionValue): ?>
                <?php
                            // necessary for update action.
                            if (! $modelOptionValue->isNewRecord) {
                                echo Html::activeHiddenInput($modelOptionValue, "[{$i}]id");
                            }
                        ?>
                <tr class="form-options-item1">
                    <td class="sortable-handle text-center vcenter" style="cursor: move;">
                        <i class="glyphicon glyphicon-fullscreen"></i>
                    </td>

                    <td class="sortable-handle text-center vcenter">
                        <?= $form->field($modelOptionValue, "[{$index}]nombre")->label(false); ?>
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= 
                    $form->field($modelOptionValue, "[{$index}]tipop")->dropdownList([
                        'Profesional' => 'Profesional', 
                        'Tecnico' => 'Tecnico'
                         ],['prompt'=>'Select Category']
                                    )->label(false); ?>                     
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= $form->field($modelOptionValue, "[{$index}]horas")->textInput(['onkeyup' => 'Totales()', 'id' =>'caja1' ])->label(false); ?>                     
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= $form->field($modelOptionValue, "[{$index}]valorhora")->textInput(['onkeyup' => 'Totales()', 'id' =>'caja2' ])->label(false); ?>                     
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= $form->field($modelOptionValue, "[{$index}]total")->textInput(['onkeyup' => 'Totales()', 'id' =>'total' ])->label(false); ?>                     
                    </td>

                    <td class="text-center vcenter">
                        <button type="button" class="delete-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                    </td>
</form>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <?php DynamicFormWidget::end(); ?>
</div>


<!--button saving-->
<div class="pull-right">
 <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
    </div>
</div>

<?php ActiveForm::end(); ?>

函数总计（）{
使用（document.forms[“dynamic form”]）
{
var totalResult=数值（caja1.value）+数值（caja2.value）；
total.value=totalResult；
}
}


细节




个人外遇


+添加行


名称
酒醉
H-H
值H-H（$）
总数（元）
编辑

\u form.php

<td class="sortable-handle text-center vcenter">
    <?= $form->field($modelOptionValue, "[{$index}]horas")->textInput(['onkeyup' => 'totales($(this))'])->label(false); ?>                     
</td>

<td class="sortable-handle text-center vcenter">
   <?= $form->field($modelOptionValue, "[{$index}]valorhora")->textInput(['onkeyup' => 'totales($(this))'])->label(false); ?>                     
</td>

<td class="sortable-handle text-center vcenter">
   <?= $form->field($modelOptionValue, "[{$index}]total")->textInput()->label(false); ?>                     
</td>

---

谢谢你，疯狂的骷髅，但我得到了错误：

uncaughttypeerror:无法读取HTMLInputElement.onkeyup（index.php？r=site%2Fproyecto:123）上totals（index.php？r=site%2Fproyecto:46）的未定义属性“attr”

这是为了什么？你能详细解释一下物价指数吗？我看到了带有检查项的代码，我的变量是personalexterno-0-horas和personalexterno-0-valorhora。@Dakarin我的错误，请参阅更新的答案。需要在函数参数中传递当前输入

['onkeyup'=>'总计（$（此））]

谢谢，但我得到了另一个错误：

未捕获的TypeError:无法读取未定义的属性“split”

我认为错误是

var horas=$（“#modelOptionValue-'+index+'-horas'）.val（）中的变量“horas”因为它未定义<代码>var horas

不接收值，

var索引

如果它接收到值为0的id值，或者如果我删除“替换”，则接收到完整的id（personalexterno-0-horas）。但是

var horas

不返回值。这是为了什么？很抱歉给您带来不便，谢谢。我已经解决了这个问题，我只需更改

$（“#modelOptionValue-”+index+“-horas”）。Val（）用于
$（“#personalexterno-”+index+'-horas”）。Val（）这是他使用的变量。我可以返回value=）非常感谢。
function totales(item){   
   var index  = item.attr("id").replace(/[^0-9.]/g, "");   
   var horas = $('#modelOptionValue-' + index + '-horas').val();
   horas = horas == "" ? 0 : Number(horas.split(",").join(""));
   var valorhora = $('#modelOptionValue-' + index + '-valorhora').val();
   valorhora = valorhora == "" ? 0 : Number(valorhora.split(",").join(""));
   $('#modelOptionValue-' + index + '-total').val(horas + valorhora);     
}