Hi.
If you have a dropdown list looking like this:
What’s the best flavour?
Is it possible to make it so when you choose chocolate, a hidden text box shows up and if you choose Vanilla a different text box shows up, and if so, could anyone give me an example of what the code would look like?
I appreciate any help!
Seb,
Add an onChange event for the dropdown. The code would look like this. If there are more than two choices, there are better ways to do it.
export function dropdownFlavor_change(event) {
if ($w('#dropdownFlavor').value === "Chocolate"){
$w('#inputChocolate').show();
$w('#inputVanilla').hide();
} else {
$w('#inputVanilla').show();
$w('#inputChocolate').hide();
}
}
Thank you very much for your help - that worked!
We will usually just have 2-4 choices, but if there is another way you’d recommend, I’d be happy to hear it.
export function dropdownFlavor_change(event) {
switch ($w('#dropdownFlavor').value) {
case "Chocolate":
$w('#inputChocolate').show();
$w('#inputVanilla').hide()
$w('#inputStrawberry').hide();
break;
case "Vanilla":
$w('#inputVanilla').show();
$w('#inputChocolate').hide();
$w('#inputStrawberry').hide();
break;
case "Strawberry":
$w('#inputStrawberry').show();
$w('#inputVanilla').hide()
$w('#inputChocolate').hide();
break;
default:
// otherwise
}
}
Thank you once again.
I have an issue as it says “”#inputChocolate" is not a valid selector", and it does this with all the inputs. The choices on my dropdown is Chocolate, Vanilla and Strawberry, and the only thing I changed about your code is dropdownFlavor to match the ID of my dropdown. Is there a step I have to do before this to tell the system what my choices are?
@info71631 Evidently, there is a slight difference in the spelling in the switch statement and the actual name of the input. It is case-sensitive.
@Seb What is the better way of doing this ?
Better I start with what i want to achive as this might not be the best way to do it.
Basically : 4 data sets , 4 options(1 dropdown), populate form options based on sectioned option.
What I am trying to do: Its a custom Form.
I want a dropdown that when selecting a specific value will show/expand a new section of the form For example: 4 Product groups, P1,P2,P3,P4
When selecting P1 ether: populate the user-input with filtered options / show a new section with all filter option for P1
When selecting P2 : Show + filter options based on P2
P3:P3 same again
P4:P4
I might want more later.
Currently managed: at the moment all data is in one dataset but what I want is to have 3 datasets for each product group and for it to show all relevant information for it. I just though the best way to do that is keep my filters and show and hide each section so technically all options are there but only 1 set of options gets shown.
@Seb What is the better way of doing this ?
Better I start with what i want to achive as this might not be the best way to do it.
Basically : 3 data sets , 3 options(1 dropdown), populate form options based on sectioned option.
What I am trying to do: Its a custom Form.
I want a dropdown that when selecting a specific value will show/expand a new section of the form For example: 3 Product groups, P1,P2,P3
When selecting P1 ether: populate the user-input with filtered options / show a new section with all filter option for P1
When selecting P2 : Show + filter options based on P2
P3:P3 same again
Currently managed: at the moment all data is in one dataset but what I want is to have 3 datasets for each product group and for it to show all relevant information for it. I just though the best way to do that is keep my filters and show and hide each section so technically all options are there but only 1 set of options gets shown.