Dependent textinput

Yii 2.0 General Discussions
1

Please how do a make a dependent textinput after a dropdown is clicked in yii 2

I have a table with 3 fields

id

name

address

Name is displayed in dropdown, while address is loaded when the dropdown is clicked based on the selection. Thanks

2

Take a look at this:

DepDrop

3

depdrop only has dropdown. I need the one that when dropdown is clicked, it loads name, while it automatically populate the textinput with address from the same model




        <div class="col-xs-12 col-sm-4 col-lg-4">

            <?= $form->field($model, 'tariff_id')->widget(Select2::classname(), [

                'data' => ArrayHelper::map(app\modules\consumers\models\BuildingTariff::find()->all(),'tariff_id','tariff_code', 'tariffCategory.cat_name'),

                'language' => 'en',

                'options' => ['placeholder' => 'Select Tariff Class ...',

                'onchange' => '


                $.post( "index.php?r=consumers/buildingtariff/lists&id='.'"+$(this).val(), function( data ) {

                $( "select#tariff_desc" ).html( data );

                });'


           //     ',    tariff_desc

                ],

                'pluginOptions' => [

                    'allowClear' => true

                ],

            ]); ?>

        </div>


        <div class="col-xs-12 col-sm-4 col-lg-4">

            <?= $form->field($model, 'supply_rating')->textInput(['readonly' => 'readonly', array('id'=>'tariff_desc')]); ?>    

        </div>

Similar to what is shown above. Please help

4

Your code may be just an example, but just pointing out for other users who view this thread and are new, your example violates the principles of MVC.

You shouldn’t be putting logic in the view:

Following MVC guidelines, you would handle this (or any logic) in the Controller and pass it to the view.

I would also not handle the JavaScript/jQuery inside the Yii $form->field. Breaking in and out of PHP gets messy. Handle the onChange detection in a js file (ie: /web/js/script.js) or for testing, throw a ‘<script></script>’ tag in the HTML of your view.

Bind an onChange to the dropdown, and check it’s value. If it has a value (they selected something) then show/enable the other element (textbox/dropdown).

If you need to use that dropdown’s value to look up more info from the DB, then run an AJAX call to a simple API that returns the results, and have them update the other element (textbox/dropdown).