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!
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!
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
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
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?
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…
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!
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.
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…
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).
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?
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.
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.
