Creating A Form- "other" trigger a new input field

Ask the community
,
1

I am creating a form with a drop down list and one of the options will be “other”. If other is selected I want it to trigger a new input field to expand so they can input their category. Could you point me in the right direction with the code? I’ve read through the cheatsheet and tutorials and am struggling. I’m sure this will be a popular request. Thanks

1 Like
2

Hay Lorriane,

What you are looking for is the combination of the dropdown onChange event and the expand / collapse APIs.

Select the dropdown, and on the property panel select to add an onChange event. The event is documented as part of our reference . In the event handler, check the value of the dropdown and if it is the “other” value, select to expand the other input. Otherwise, collapse it.

it should look something like this

export function dropdown_onChange(event) {
  if ($w('#dropdown').value === 'Other') 
    $w('#otherInput').expand();
  else  
    $w('#otherInput').collapse();
}

Note that depending on your form organization, you may need to use hide / show instead of collapse, or if you want to make the other input collapse with it’s caption you may need to group them together and make the group collapse.

3

Woot-Woot- that worked! So I changed it to look like:
export function selection1_onChange(event) {
if ($w(‘#selection1’).value === ‘other’)
$w(‘#Webtypeother’).expand();
else
$w(‘#Webtypeother’).collapse();

Where selection1 was the name of my dropdown, the other value was ‘other’ and the #otherinput field was named #Webothertype. Hope this is useful for others too. Going to be using this a lot. Thanks so much Yoav.