时间戳

首页 > 解决方案 > 如何在 ActiveForm Yii2 中制作自动加载字段

javascript - 如何在 ActiveForm Yii2 中制作自动加载字段

问题描述

我需要自动完成字段 Grams_net，我想从 total_gr disc_gr 中提取并将结果加载到 net_gr

_形式：

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

感谢您的任何帮助。

标签： javascriptjqueryyii2

解决方案

这可以使用 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 条件。

推荐阅读