How to make autoload field in ActiveForm Yii2

Question

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.

Answer 1

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.