Question

我是新来的。我需要帮助。我使用名为＆＃34; wbraganca / yii2-dynamicform＆＃34;的插件。我有一个表单，允许两个字段的总和（caja1和caja2，添加的结果是＆＃34;总和＃34;）。这有效。但是我有一个问题，当我使用＆＃34; Add rows＆＃34;按钮。这些字段不允许添加。只有第一行有效，但新行无效。我怎样才能让它动态地工作？

谢谢。

我的观点。

<?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(); ?>

Answer 1

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

<强> JS

使用自动生成的字段ID而不是自定义ID。您可以检查元素以查找为字段生成的id。假设您的字段ID。对于前者第一个字段modelOptionValue-1-horas。

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);     
}

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

1 个答案: