buttflattery / yii2-formwizard

A Yii2 plugin used for creating stepped form or form wizard using yii\widgets\ActiveForm and \yii\db\ActiveRecord
https://yii2plugins.omaraslam.com/formwizard
Other
96 stars 13 forks source link

add INPUT_HIDDEN field in FormWidget #57

Closed girishcp closed 4 years ago

girishcp commented 4 years ago

Is this possible to add the hidden field in the FormWidget, actually I want to hide the text field and show the same when I choose Yes from the dropdown (select2).

buttflattery commented 4 years ago

Yes, you can create a hidden input inside the form widget but first you need to declare it inside your model for example if you are using a user model.

class User extends ActiveRecord
{
    public $hidden_field;
}

then set this field as hidden in the fieldConfig options of the FormWizard widget like below

use buttflattery\formwizard\FormWizard;
echo FormWizard::widget([
    'steps'=>[
        [
            'model'=>$userModel,
            'title'=>'User',
            'description'=>'Add User Info',
            'formInfoText'=>'Fill all fields'
                'fieldConfig'=>[
                    'hidden_field'=>[
                        'options'=>[
                            'type'=>'hidden'
                        ]
                    ]
                ],
        ],
    ]
]);

If you intend to use it for server side too after submitting the form you might have to declare it safe inside the User model rules.

Please use stackoverflow for questions, use issue tracker for bug reports or feature requests. If you use the yii2-formwizard tag in the question on stackoverflow i will be automatically notified.

girishcp commented 4 years ago

Thanks for your reply.

@buttflattery what I am doing in the yii2-formwizard, I am showing and hiding the textbox based on the selection from select2, for example, we have 2 options ( YES and NO) in the select2 and if user select YES then textbox will appear and the user enters the value in the textbox and submit the form, When user updates the form then the textbox should be appear by default if value exists.

buttflattery commented 4 years ago

@girishcp Well what looked like was you just wanted to keep a hidden input inside the widget and keep it hidden like _csrf input that is created by ActiveForm to hold the token which is kept hidden throughout, but what you are asking is something different and the field is already the part of the model/table and you want to show or hide it and not actually want to create a hidden input.

So you should instead create a class in css,

.my-hidden-input{
    display:none;
}

and then add that class to the containerOptions under the fieldConfig

'fieldConfig'=>[
    'your_field_name'=>[
        'containerOptions'=>[
            'class'=>'my-hidden-input'
        ]
    ]
]

And then use the select2 event select2:select to show or hide the input field by actually showing and hiding the container .my-hidden-input using simple $.show() or $.hide().

girishcp commented 4 years ago

@buttflattery it's all working fine with the show and hide the textbox with select2 when we create the form widget but how the "your_field_name" field show automatically in the Edit form if the textbox is not blank.

buttflattery commented 4 years ago

you should use the model rules to do that by using the whenClient option @girishcp

girishcp commented 4 years ago

@buttflattery How we can show the textfield by using the whenClient if Can you please give me some example if you have.

I hope you understood my problem, let me clear from scratch

I have dropdownlist (Select2) with YES/NO options and then if the user selects the YES option then I am showing the textfield. It's working fine when we create the form but when we update/open the submitted form and the user has selected the "YES" option then the textfield should be visible by default.

I am using the validation in the WhenClient when the user selecting the Yes option the textfield should be mandatory and it's working fine with the WhenClient option.

buttflattery commented 4 years ago

ok @girishcp i get it now what you are saying you are talking about the edit part where the values are loaded and you expect the hidden field to be shown instead. i would still stay that you should not use the input type hidden and should hide the container instead and the class should be added only when the value matched the required for example see below if you follow my preferred way you will find doing it way more easier that you are currently doing. I assume that your select2 field name is my_field change it accordingly.

change the field configuration to the following

'fieldConfig'=>[
    'your_field_name'=>[
        'containerOptions'=>[
            'class'=>($model->my_field=='yes')?'form-group ':'form-group my-hidden-input'
        ]
    ]
]

And if you like the widget please show some love by giving a star to the repo.

girishcp commented 4 years ago

@buttflattery Thanks for the reply. Will this also work in STEP_TYPE_TABULAR type, I am using the multiple form widget.

This is my code...

$step2 = [ 'model' => $model, 'type' => FormWizard::STEP_TYPE_TABULAR, ................. 'text_field_name' => ['type' => Form::INPUT_TEXT, 'options' => ['placeholder' => ''], 'containerOptions' => ['class'=>($model->select2_field==1)?'form-group ':'form-group hide']]

but this is not working because of the STEP_TYPE_TABULAR type.

girishcp commented 4 years ago

@buttflattery did you find any solution on this. please tell me.

buttflattery commented 4 years ago

@girishcp https://github.com/buttflattery/yii2-formwizard/issues/60

girishcp commented 4 years ago

@buttflattery So if I understand stood correct, it's not possible in STEP_TYPE_TABULAR.

buttflattery commented 4 years ago

Yes, currently it isnt, will be in a day or two.

girishcp commented 4 years ago

@buttflattery I hope you are doing well.

did we find any solution on the below code to implement in the STEP_TYPE_TABULAR.

'class'=>($model->my_field=='yes')?'form-group ':'form-group my-hidden-input'