How to populate data in textbox onchange of two separate dropdownlist in yii2

Question

I'm trying to populate "num" in textbox when "year" and "console" is selected. The database query should run like - select max(num)+1 from table when year = 'someyear' and console = 'someconsole'. My Controller Action looks like -

public function actionGetForNum($yearid , $consoleid)
    {
        $num = Bills::find()->select('(max(num) + 1) as num')->where(['bills_year'=>$yearid])->andWhere(['console'=>$consoleid])->asArray()->one();
        echo Json::encode($num);
    }

I'm using select2 widget to select year and console. Year and console are not dependent on each other.

<?= $form->field($model, 'bills_year')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Year::find()->orderBy(['yid' => SORT_DESC,])->all(),'year_year','year_year'),
    'language' => 'en',
    'options' => ['placeholder' => 'Select Year', 'id' => 'yearid'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    ]); ?>

    <?= $form->field($model, 'console')->widget(Select2::classname(), [
    'data' => ArrayHelper::map(Console::find()->orderBy(['consoleid' => SORT_ASC,])->all(),'console','console'),
    'language' => 'en',
    'options' => ['placeholder' => 'Select Console','id' => 'consoleid'],
    'pluginOptions' => [
        'allowClear' => true
    ],
    ]); ?>

And the javascript code I've tried is-

<?php
/* start getting the num */
$script = <<< JS
$(function(){
    $('#yearid').change(function(){   
        getNum();
    });
    $('#consoleid').change(function(){   
        getNum();
    });

    var yearid = $(this).val();
    var consoleid = $(this).val();

    var getNum = $.get('index.php?r=invoice/bills/get-for-num',{ yearid : yearid, consoleid : consoleid }, function(data){
        alert(data);
        var data = $.parseJSON(data);
        $('#bills-num').attr('value',data.num);
        });

});


JS;
$this->registerJs($script);
/* end getting the num */
?>

In this code I'm getting error - TypeError: getNum is not a function Here is the error screen - Please suggest how to correct it.

Update - I've changed the javascript code as below -

<?php
/* start getting the num */
$script = <<< JS
$(function(){
    $('#yearid').change(function(){   
        getNum();
    });
    $('#consoleid').change(function(){   
        getNum();
    });

    var yearid = $(this).val();
    var consoleid = $(this).val();

    var getNum = function(){
        var yearid = String($('#yearid').val());
        var consoleid = String($('#consoleid').val());
        $.get('index.php?r=invoice/bills/get-for-num',{ yearid : yearid, consoleid : consoleid }, function(data){
        alert(data);
        var data = $.parseJSON(data);
        var getNum = data;
        $('#bills-num').val(getNum);
        });

    } ;

});


JS;
$this->registerJs($script);
/* end getting the num */
?>

And I'm getting the desired value but it's not showing up in the textbox. It's very close now. Please help. Please check the below screenshot

Answer 1

$('#bills-num').val(getNum["num"]);