Hiding/Showing fields within a form

Hi All,

I’m wondering whether it is possible to hide/show fields based upon a “Yes” or “No” selection in a radio button.

as an example…

If I had a radio button that said “Have you got any oranges?” with the options being yes or no.

If you selected yes another field would appear saying “How many do you have?”

If the answer to the original question was no, then the “how many” box wouldn’t appear.

First post! appreciate any help… be gentle!

Thanks

M

I think you use the visible_calc

example: "visible_calc": "model.form.carAccident == 'Yes'"

REplace my MODEL.FORM.CARACCIDENT with your specific model. And the YES to whichever answer is the criteria.

1 Like

Hi Melvyn, welcome to the forum!

To answer your question, yes that is possible. All fields in your form can be hidden based on a field called "visible". Take this radio button for example:

{
                "label": "How many do you have?",
                "model": "numOfOranges",
                "styleClasses": "col-md-4",
                "type": "radios",
                "values": ["2", "3"],
                "visible": false
            },

The "visible" takes a boolean value which is set to false, so the radio button will be hidden. But what if I wanted to conditionally show the radio button?

Some fields can be calculated, meaning they can use JavaScript to calculate a dynamic result. Here’s an example of two radio buttons, one which is regular, and one which is conditionally shown based of the former:

{
                "label": "Have you got any oranges?",
                "model": "hasOrange",
                "styleClasses": "col-md-4",
                "type": "radios",
                "values": ["Yes", "No"]
            }, {
                "label": "How many do you have?",
                "model": "numOfOranges",
                "styleClasses": "col-md-4",
                "type": "radios",
                "values": ["2", "3"],
                "visible_calc": "model.hasOrange == 'Yes'"
            }

The second radio button has the field "visible_calc" which checks whether or not the selected option of the first radio button was ‘Yes’ or not. If ‘Yes’, it would be true and be visible, else it would be hidden.

End Result:


Hope this helps!

Hi Andrew,

Thank you very much for your help. Really appreciate it.

M

1 Like