How to offer 2 total different choice options when only 1 can be selected?

Dear Bubblers,

I am creating an online form. On the form, I have an option where the user can choose from two extremely different possibilities.

Option one, if chosen, allows the user to enter a URL address as choice 1.

Option two, if chosen, allows the user to simple add text as choice 2.

I attached a screenshot for better visual understanding.

Question:

How exactly does this get setup in Bubble? Do I need to create a IFTTT rule between check box 1 and Check box 2? Or, if check box 1 is selected how does it deactivate check box 2 and vice versa? I would also like that when an option is ‘checked’ it ‘grays out’ the un-chosen option.

Also, I guess I would need to associate each check box to the option box it represents. How is this accomplished exactly?

Any ideas or insight into getting this accomplished would be greatly appreciated!

Thank you,

John

Screenshot at 2020-03-06 17-31-28

You can have it so that when option 1 is selected, option 2’s value is set to no (and vice versa so that only one option can be selected. Then on the conditionals of the inputs themselves, you can say that when the value of option X’s checkbox or group it’s in is No, disable the input (and/or hide it completely by making it not visible). If it’s Yes, then enable it (and/or make it visible).

I don’t know if you need it to be formatted the way you have it, but if they are mutually exclusive options, I might recommend radio buttons as opposed to checkboxes as a UI decision!


Kevin
AirDev

We’re looking for Bubble developers, designers, and more to join our team: https://airdev.co/partners

Thanks for the reply on this one Kevin! Do you know of any step-by-step tutorial that can guide me through this? I have tried finding something but guess I’m using incorrect search terms.
thanks,
John

Here’s how you would configure the conditionals in the first situation:

And here’s how you would configure them in the latter, which I think would be recommended here:

Then just apply the logic to the other input as well for Option 2!

*If something is not visible, you don’t necessarily need to disable it, but you can. I included both here just to show you that you could pick one or the other depending on whether you want the inputs to be visible or just disabled.


Kevin
AirDev

We’re looking for Bubble developers, designers, and more to join our team: Join Airdev Partners

1 Like

Only because I was building out an example at the same time as @kevin12, I’ll throw it out here as food for thought.

I’m with Kevin all the way on the radio buttons, and here is what a super simple design could look like using hidden fields…

url

… and when the text entry option is selected…

text

It’s built out the same way Kevin showed, so nothing super interesting here other than a visual on how the design might look with hidden fields.

Best…
Mike

Kevin and Mike,

Thank you very much for coming to me with the answers I needed! I really appreciate your help on this!

Thus far, I haven’t been able to achieve positive results:

As you can see from the screenshot I have different options available and I have tried all variations possible and no matter what the input boxes still allow data to be entered. This is real baffling.

Maybe there is scheduled maintenance going on or something?

Or is there a devil in the detail that I’m missing?

Thanks for the support!

JOhn

Hi, John… you haven’t selected what is supposed to happen when a condition is true. Given the example I showed above, here is the condition that shows the URL field when the URL radio button is selected…

Does that make sense?

Oh, and are you really sure you don’t want to use radio buttons? :slight_smile:

Best…
Mike

Sure it makes sense… But as you can see from my screenshot that option ‘This element is visible’ is missing!

You have to select it from the Select a property to change when true dropdown. In other words, it doesn’t just show up on its own.

Mike & Kevin
,
Thanks for pointing me in the right direction with that tip. I got things to the point where everything is working now.

Although, I can choose option 1 and enter data option two still can be ‘ticked’ although no data can be entered. However, if I untick 1 and tick 2 then data can be entered there as well.

Good news is that I’m moving forward with the help You and Kevin offered! Thanks to the two of you I’m making progress!

Thank you Guys!

John

Happy to help, John… glad to hear you are making progress.

Oh, and about this…

… that’s why Kevin and I suggested the use of radio buttons because they inherently don’t allow that behavior… just food for thought.

Best…
Mike

Well…now that I know that! Devil is in quite a bit of details isn’t he?

1 Like

Hi Mike & Kevin,

I attempted to give the radio buttons a try and nothing is working.

I created 3 radio buttons (EG RadioButtons A-C). As can be0 seen in the attached pic. Radiobutton ‘A’ is setup. However, when I do a preview the radio buttons for B and C can also be pressed when my instructions state that they should be disabled.

I tried a lot of variations the last 3 hours so now it’s time to ask what I’m doing wrong.

Thank you,

john

It sounds like you have added three separate radio button elements to your page as opposed to adding one radio button element that has three choices. The one I used in my example is configured like this…

radio

You don’t need conditions to disable one radio button when another one is selected… that is the whole point of radio buttons (only one can be selected at a time).

Hope this helps!

Best…
Mike

That is correct! In this situation we have three separate radio buttons to choose from. A situation whereby three radio buttons are lumped together will not work. Therefore, I must label each option separately and explain each. Some people just aren’t mind readers so things just need to be laid out clearly.

That said, I linked to them correctly as outlined in my pic above but it is not working and I thought to ask why not?

Does this help?

Thanks!

John

The why not is because is pressed doesn’t do what you are thinking it does. You will likely need to use a custom state to know that a particular radio button is selected and then key off that state to disable the other two.

Best…
Mike

Sounds complex and complicated. I didn’t even see custom states listed as a menu item to choose from. I guess you can’t do this in a ‘repeating group’?

It’s strange that for three separate elements like this you can’t choose one of the three easily.

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