Yii2 - How to update textInput Value from DropDownList -

please got problem on yii2: want insert value textinput field based on changes in selected option dropdownlist. here code:

<?= $form->field($model,   'course_taken')->dropdownlist(arrayhelper::map(courses::find()->all(),'course_code','course_code')) ?>  <?= $form->field($model, 'course_details')->textinput(['maxlength' => true]) ?> 

so when user selects course dropdownlist, textinput display course details of selected row. both course_taken , course_details columns same database table. in advance.

you can of javascript.

1) create action ajax request getting course details id in controller , set response format json. prefer use contentnegotiator instead of setting right before render:

use yii\web\response;  ...  yii::$app->request->format = response::format_json; 

but can use approach alternative.

use yii\web\response;  ...  /**  * @inheritdoc  */ public function behaviors() {     return [         [             'class' => contentnegotiator::classname(),             'only' => ['get-course-details'],             'formats' => [                 'application/json' => response::format_json,             ],         ],     ]; }  /**  * @param $id  * @return array  * @throws notfoundhttpexception  */ public function actiongetcoursedetails($id) {     $model = $this->findmodel($id);      return ['coursedetails' => $model->course_details]; }  /**  * @param integer $id  * @return yourmodel  * @throws notfoundhttpexception  */ protected function findmodel($id) {     if (($model = yourmodel::findone($id)) !== null) {         return $model;     } else {         throw new notfoundhttpexception('this course not exist.');     } } 

add javascript:

$('#select-id').change(function() {     $.get('get-course-details', function(data) {         $('#text-input-id').text(data.coursedetails);     }).fail(function() {         alert('failed course details');     }); }); 

to read more how work javascript organized in yii2, please refer assets section in official docs.

of course can improve adding loading spinner or that, etc., basic example.

2) if amount of course details small , text have small size, can eagerly include in dom somewhere, example in data attribute of option ("data-course-details" = ...) , that:

$('#select-id').change(function() {     var coursedetails = $(this).find(":selected").data('course-details');     $('#text-input-id').text(coursedetails);         }); 

3) similar approach 2) eagerly load data 1 ajax request on initial load , store in variable rather dom.

/**  * @param $id  * @throws notfoundhttpexception  */ public function actiongetcoursedetails() {     $models = yourmodel::find()->all();        $list = arrayhelper::map($models, 'course_code', 'course_details');      return ['coursedetails' => $list]; } 

details indexed code can retrieve it:

$(function() {     var coursedetails;      loadcoursedetails();      function loadcoursedetails() {         $.get('get-course-details', function(data) {             var coursedetails(data.coursedetails);         }).fail(function() {             alert('failed course details');         });     }          $('#select-id').change(function() {         $('#text-input-id').text(coursedetails[$this.val()]);     }); });