Dependent Inputs

When editing a model or in edit mode where the values are loaded in the form and we are using the tabular step we can come across a situation where we need certain options to be visible when the form loads which are by default hidden when adding a new record as compared to editing. Like if you have a tabular step for adding multiple addresses and if the country is US only then you want to show the state and city option and not other wise. The tabular step will not show those inputs when loaded in edit mode and you have already saved multiple addresses with the city selected as US.

We can use the depends option to encounter this problem.

• depends (array) : used with tabular step when you have dependent inputs and you want to show or hide them based on the value in the input it depends on when form is loaded to edit the values, see WIKI for code samples. It takes the following special parameters
  • attribute (string) : the name of the attribute/fields the current field depends on, this parameter is required.
  • when (string) : the value to check, or the value which is compared with the on which you need to show the current input, this parameter is required.
  • condition (string) : the condition to evaluate the value of the dependent input with the given value in when. default condition used is ==.
  • then (callback) : takes a new JsExpression() encoded callback function function(id){}, it takes one parameter id that holds the id of the current input. If not provided it will call jQuery.show() on the id of input it is applied on if the value matches in the when option.
  • else (callback) : takes a new JsExpression() encoded callback function function(id){}, it takes one parameter id that holds the id of the current input. If not provided it will call jQuery.show() on the id of input it is applied on if the value matches in the when option.

We will illustrate the an example below which uses the above options

use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'steps'=>[
        [
            'model'=>$address,
            'title'=>'Adddresses',
            'type' => FormWizard::STEP_TYPE_TABULAR,
            'description'=>'Add your addresses',
            'fieldConfig' => [
                   'country' => [
                        'options' => [
                            'type' => 'dropdown',
                            'itemsList' => [1 => 'US', 2 => 'other'], //the list can be from the database
                            'prompt' => 'Please select a value',
                        ]
                    ],
                    'city' => [
                        'containerOptions'=>[
                            'class'=>'form-group'
                        ],
                        'depends' => [
                            'attribute' => 'country',
                            'when' => '1',
                            'condition'=>'==',
                            'then' => new JsExpression("function(id){
                                $('#'+id).closest('.form-group').show();
                            }"),
                            'else' => new JsExpression("function(id){
                                $('#'+id).closest('.form-group').hide();
                            }"),
                        ],
                        'options' => [
                            'type' => 'dropdown',
                            'itemsList' => ArrayHelper::map(City::find()->all(),'id','name'),
                            'prompt' => 'Please select a value',
                        ]
                    ],
                    'state' => [
                        'containerOptions'=>[
                            'class'=>'form-group'
                        ],
                        'depends' => [
                            'attribute' => 'country',
                            'when' => '1',
                            'condition'=>'==',
                            'then' => new JsExpression("function(id){
                                $('#'+id).closest('.form-group').show();
                            }"),
                            'else' => new JsExpression("function(id){
                                $('#'+id).closest('.form-group').hide();
                            }"),
                        ],
                        'options' => [
                            'type' => 'dropdown',
                            'itemsList' => ArrayHelper::map(State::find()->all(),'id','name'),
                            'prompt' => 'Please select a value',
                        ]
                    ],
             ]
        ],
    ]
]);

Taking a look at the above if we take out the piece of code below

'state' => [
    'containerOptions'=>[
        'class'=>'form-group'
    ],                      
    'depends' => [
        'attribute' => 'country',
        'when' => '1',
        'condition'=>'==',
        'then' => new JsExpression("function(id){
            $('#'+id).closest('.form-group').show();
        }"),
        'else' => new JsExpression("function(id){
            $('#'+id).closest('.form-group').hide();
        }"),
    ],
]

we can read it out like state input depends on the attribute country when the value of the country depending on the condition == , if true then do $('#'+id).closest('.form-group').show(); and if false else do $('#'+id).closest('.form-group').hide();.

So when the model loads in the edit mode if the country saved matches the id of the US i.e 1 it will automatically show the city and state dropdowns.