I’m working on a form to collect rsvp information from site visitors. I’d like to ask them how many guests they will be bringing and allow them to choose a number from a drop down menu. Based on their response I’d like to view that many fields to input names.
For example, John comes to site to rsvp. He wants to bring three guests. When he selects 3 from the drop down menu three boxes appear so that he can enter each of his guests names in a separate field.
Is this possible?
anyone have a solution for it?
Its possible.
But I would do it differently if you have a limited amount of options (let’s say 1-5 guests) or unlimited number of guests.
Let’s say you have a limited number of boxes:
Then:
$w(“#text1”).onClick( (event) =>
$w(“#dropdownBox).collpased ? $w(”#dropdownBox).expand() : $w(“#dropdownBox).collapse();
})
$w(”#option1").onClick( (event) => {
$w(“#inputBox1).expand();
})
$w(”#option2").onClick( (event) => {
$w(“#inputBox1).expand();
$w(”#inputBox2).expand();
})
…
etc.
You can do it shorter using an index, but since it’s only five boxes, you can do it manually as well.
Hello J.D., Thank you for this recommendation. I am trying to do something similar and trying to adapt the code to drop down menus.
This is what I am trying to do:
I have 3 drop down menus, #dropdown1, #dropdown2 and #dropdown3
#dropdown1 menu have two options “Selection 1”, “Selection 2” and is not collapsed.
When “Selection 1” from #dropdown1 is selected, expand #dropdown2, otherwise if “Selection 2” is selected then expand #dropdown3 instead. This is what I tried and it’s not working (not sure if I understood the code right):
$w(“#dropdown1”).onClick( (event) =>
$w(“#dropdownBox1).collpased ? $w(”#dropdownBox1).expand() : $w(“#dropdownBox1).collapse();
})
$w(”#Selection1").onClick( (event) => {
$w(“#dropdown2).expand();
})
$w(”#Selection2").onClick( (event) => {
$w("#dropdown3).expand();
})
I understand that the first line is for the click button you suggested above, but can’t get it to work for the dropdown menu. Also, #selection1 and #selection2 does not automatically show to select like the #dropdown from the code section. Is that because I can’t do it?
was thinking of making it this way too:
Instead of drop down menus, have text boxes with the selections from the drop down menus, and when they click one to expand a new set of text boxes.
Code:
$w(" #text1 ").onClick( (event) =>
$w("#text2).collpased ? $w(“text2).expand() : $w(” # text2).collapse();
})$w("#text3).collpased ? $w(“text3).expand() : $w(” # text3).collapse();
})$w("#text4).collpased ? $w(“text4).expand() : $w(” # text4).collapse();
})
But I think that is not efficient because I want to scale it up once I get this small example done, aiming to add around 5-10 different selections on dropdown menus, reaching 10 dropdown menus in total, while connecting all these drop down menu selections to a database .
Can you please advice? Thank you for all your help.
Yousef
@yousefrifai first of all, when it comes to old threads, it’s better to write a new post.
second, you should do something like:
$w.onReady(() => {
$w("#dropdown1").onChange(event => {
$w("#dropdown1").value === "selection1" ? $w("#dropdown2").expand() : $w("#dropdown2").collapse();
$w("#dropdown1").value === "selection2" ? $w("#dropdown3").expand() : $w("#dropdown3").collapse();
})
})
//make sure you use the value and not the label (of the dropdown option)
P.S. I fixed it.
@jonatandor35 Hi J.D., I am sorry, I am new to the forum, I will create a new post next time. 
I just tried that code and it works perfectly! Done one minor change in the first line ($w.onReady() => {, kept giving me an error):
$w.onReady( function () {
$w(“#dropdown1”).onChange(event => {
$w(“#dropdown1”).value === “manufacturing” ? $w(“#dropdown2”).expand() : $w(“#dropdown2”).collapse();
$w(“#dropdown1”).value === “services” ? $w(“#dropdown3”).expand() : $w(“#dropdown3”).collapse();
})
})
Thank you for your help, I really appreciate it. You’re amazing!
@yousefrifai You’re welcome