如何在ActiveForm Yii2中设置自动加载字段

时间:2019-07-18 15:00:33

标签: javascript jquery yii2

我需要自动完成g_net字段,也就是说,我要从total_gr disc_gr中提取并将结果加载到net_gr

_form:

<div class=" col-sm-4">
    <label class="col-sm-12 control-label" for="total_gr">Total gramos:</label>
    <?php echo $form->field($product, 'total_gr', [
    'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
    ])->textInput()->input('total_gr', ['placeholder' => "Peso total gr"])->label(false);
    ?>
    </div>
    <div class="col-sm-4">
    <label class="col-sm-12 control-label nowrap" for="disc_gr">Descont/gr:</label>
    <?php echo $form->field($product, 'disc_gr', [
    'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
    ])->textInput()->input('disc_gr', ['placeholder' => "Descont /gr:"])->label(false);
    ?>
    </div>
    <div class="col-sm-4">
    <label class="col-sm-12 control-label" for="net_gr">Peso neto/gr:</label>
    <?php echo $form->field($product, 'net_gr', [
    'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
    ])->textInput()->input('net_gr', ['placeholder' => 'Peso neto/gr:','disabled' => 'true'])
    ->label(false);
    ?>
    </div>
    </div>
    </div>

谢谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这可以使用JQuery完成:

use yii\web\View;

为所有三个字段添加唯一的ID:

<?php echo $form->field($product, 'total_gr', [
    'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
    ])->textInput()->input('total_gr', ['id' => 'total_gr', 'placeholder' => "Peso total gr"])->label(false);
    ?>
    </div>
    <div class="col-sm-4">
    <label class="col-sm-12 control-label nowrap" for="disc_gr">Descont/gr:</label>
    <?php echo $form->field($product, 'disc_gr', [
    'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
    ])->textInput()->input('disc_gr', ['id' => 'disc_gr', 'placeholder' => "Descont /gr:"])->label(false);
    ?>
    </div>
    <div class="col-sm-4">
    <label class="col-sm-12 control-label" for="net_gr">Peso neto/gr:</label>
    <?php echo $form->field($product, 'net_gr', [
    'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
    ])->textInput()->input('net_gr', ['id' => 'net_gr', 'placeholder' => 'Peso neto/gr:','disabled' => 'true'])
    ->label(false);
    ?>

将此添加到视图文件的底部:

$script = <<< JS
    $(document).ready( function () {
        function add(x,y) {
            return (x + y);
        };
        $('input#total_gr').change(function(){
            var y = 0;
            if (!$('input#disc_gr').is(':empty')){
               y = $('input#disc_gr').val();
            }   
            $('input#net_gr').val(add($('input#total_gr').val(), y));
        });
        $('input#disc_gr').change(function(){
            var y = 0;
            if (!$('input#total_gr').is(':empty')){
               y = $('input#total_gr').val();
            } 
            $('input#net_gr').val(add($('input#disc_gr').val(), y));
        });
    });
JS;
$this->registerJs($script, View::POS_READY);

现在,您可以在所需的同一视图文件中添加特定的JQuery条件。