How to make autoload field in ActiveForm Yii2

I need to autocomplete the field grams_net, it is, I want to extract from total_gr disc_gr and the result to be loaded into 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>

Thank you for any help.

1 answer

  • answered 2019-07-18 17:35 Serghei Leonenco

    This can be done using JQuery:

    use yii\web\View;
    

    add unique ids to all three fields:

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

    add this at the bottom of your view file:

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

    Now you can add specific JQuery conditions at the same view file where they needed.