Forum Academy Marketplace Showcase Pricing Features

Show content based on radiobutton selection

I am having a site that has a radio button selection.

Based on the radio button selection/click, I want a specific content (a form) to be shown under the radio buttons.

How can I achieve that within bubble? Or do I need to deal with external HTML?

1 Like

No need to deal with HTML. Have those forms grouped and not visible by default. Add a condition to them in the property editor: “when radio button’s value is [option1] > this element is visible”

So each group that contains each form has a different condition for each option.

Keep in mind the option text you type in is case-sensitive, so they should match how you have written them in the radio button’s list of options.


Gaby | Coaching Bubble

I set the group with the form of “not visible”.
THen I created a Radiobutton (actually two). I went over to the group with the not visible form in it and set a condition, saying “When radiobuttons A is pressed - change visiibiilty of this group/form”

Didnt work so far hm

The form stays visible. It’s the group that should not be visible. The only reason I suggest grouping the form is because I assume your “form” is made up of multiple inputs, so by grouping, you only need one visibility condition to hide/show the form components.

Also the condition should be “when radio button’s VALUE is [option text]”… not when pressed.

1 Like

Also the condition should be “when radio button’s VALUE is [option text]”… not when pressed.

Edit: I got it to work. I needed to set it "When Radio Buttons VALUE is [the name of the caption of the radio button basically]!

Didn’t even know that it works trhough the VALUE instead of “is pressed” Oh well, one can always learn right?

My other question would be:

Why can’t I “de-select” the radio button? And also, I can select two of them at the same time, it seems like the radio buttons are not properly grouped together

Let’s say your radio button options are:

Mr.
Mrs.
Ms.

Basically you want to say, when the user has selected “Mr.” > show the form for men.

When the user has selected “Mrs.” > show the form for married women.

So that translates to: when radio button’s value is Mr. > whichever form that corresponds is visible.

You’d change that value for every condition because they’re going to be visible for different selections.

I can set it up for you when I’m back at a computer if you want to share a link.

Yep I just got it to work that when I click on one radio button, it shows the group with the form in it thanks to your explanation!

The other issue I am facing at this point is - like in your exmaple, I am having 3 radiobuttons

Mr.
Mrs.
Ms.

I want the user to be able to select one of them, not all fo them at the same time :smiley: How can I link them together so that bubble knows that only ONE of the three radio buttons can be selected?

Ah, you’re using multiple radio button elements. Just have one and enter all the options in the same element. So if you have Mr., hit enter to add Mrs. on the next line.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.