php - Adding some more fields to the form in yii2 using ajax -

php - Adding some more fields to the form in yii2 using ajax -

i have yii2 form:

<?php $form = activeform::begin(['id' => 'que']); ?> <?php echo $form->field($model, 'type') ->dropdownlist($questiontypes, [ 'class' => 'form-control ng-pristine ng-valid ng-touched', 'prompt' => 'select question type', 'ng-model' => 'que.type', 'ng-change' => 'addansweroptions(que);', ]); ?> <?php activeform::end(); ?>

on basis of selected dropdown value, have add together more fields same form of same model. fields added, totally depend on dropdown value.

how can this?

from info give out here suggest.

1) dynamic - no ajax

build form fields need, contain each "scenario" in separate div follows:

<?php $form = activeform::begin(['id' => 'que']); ?> <?php echo $form->field($model, 'type') ->dropdownlist($questiontypes, [ 'class' => 'form-control ng-pristine ng-valid ng-touched', 'prompt' => 'select question type', 'ng-model' => 'que.type', 'ng-change' => 'addansweroptions(que);', ]); ?> <div class="form-option" data-type="class" style="display:none;"> <?php // ... fields here case type == class ?> </div> <div class="form-option" data-type="prompt" style="display:none;"> <?php // ... fields here case type == prompt ?> </div> <div class="form-option" data-type="ng-model" style="display:none;"> <?php // ... fields here case type == ng-model ?> </div> <div class="form-option" data-type="ng-change" style="display:none;"> <?php // ... fields here case type == ng-change ?> </div> <?php activeform::end(); ?>

then want register javascript code display right blocs depending on dropdown alternative selected. bellow illustration using jquery:

$(document).ready(function(){ $('select.form-control').change(function(){ $('.form-option').hide(); // hide options if alternative showing var index = $('select.form-control').index(); $('div[data-type="'+index+'"]').show(); //show right fields }); });

if you're going go way suggest utilize ajax validation form. avoid having deal headache on page reload.

once form submitted have handle each case in controller. can either utilize simple set of if() statements check drop downwards value. or can set model validation scenario according drop downwards value.

the advantage of quicker , able take advantage of activeform. cons need know fields want display each option, , doesn't allow cumulate n number of fields when don't know how much n is.

2) using ajax

in event want utilize ajax calls load form fields have create controller/action combination homecoming fields depending on type pass in get

this action generate html of fields want display. here's example:

public function actionajaxfields($type) { $html = ''; if($type == "class") { $html .= html::textinput('field1'); } elseif($type == "prompt") { $html .= html::textinput('field2'); } else { // etc... } homecoming $html; }

note can pass user id method allow generate model , utilize html::activetextinput(), not able take advantage of activeform features.

once done, should bind function alter event of dropdown , utilize along lines of :

var responsepromise = $http.get("controller/ajax-fields", {params: {type: <type-from-dropdown>}});

unfortunately not know much angularjs extent of help can give on javascript side of things. i'm sure there's more plenty info on google/stackoverflow binding events , appending info dom in angularjs running.

let me know if can of help on yii2 side.

php ajax yii2