Use dropdown selections to expand Wix forms input fields

Ask the community
, ,
1

I have no coding experience and I know there is a better way to write this, but this is what I put together.Some fields expand and some do not. Brookhaven works but Sandia & INL show Divers state and number but not dob and directions. Can’t figure what is wrong.

export function dropdownTri_change(event) {
if ($w(‘#dropdownTri’).value === ‘Sandia’)
$w(‘#dob’).expand();
else
$w(‘#dob’).collapse();
if ($w(‘#dropdownTri’).value === ‘Sandia’)
$w(‘#directions’).expand();
else
$w(‘#directions’).collapse();
if ($w(‘#dropdownTri’).value === ‘Sandia’)
$w(‘#driversState’).expand();
else
$w(‘#driversState’).collapse();
if ($w(‘#dropdownTri’).value === ‘Sandia’)
$w(‘#driversNumber’).expand();
else
$w(‘#driversNumber’).collapse();
if ($w(‘#dropdownTri’).value === ‘INL’)
$w(‘#dob’).expand();
else
$w(‘#dob’).collapse();
if ($w(‘#dropdownTri’).value === ‘INL’)
$w(‘#directions’).expand();
else
$w(‘#directions’).collapse();
if ($w(‘#dropdownTri’).value === ‘Brookhaven’)
$w(‘#dob’).expand();
else
$w(‘#dob’).collapse();
if ($w(‘#dropdownTri’).value === ‘Brookhaven’)
$w(‘#directions’).expand();
else
$w(‘#directions’).collapse();
}

2

You don’t need to put all your elements that you want to expand or collapse as separate conditions.

Simply put all the Sandia in one list, then another for INL and Brookhaven.

So for example if dropdown is Sandia then have it as
element one expand
element two expand
element three expand
else
element one collapse
element two collapse
element three collapse
etc, etc…

3

Also, have a read here about how page layout is affected too.
https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size

4

Thank you! I rewrote it to look like this, but the first else gives a parsing error: unexpected token else . The second and third else show no error. Sorry for the back and forth.

export function dropdownTri_change(event) {
if ($w(‘#dropdownTri’).value === ‘Sandia’)
$w(‘#dob’).expand();
$w(‘#directions’).expand();
$w(‘#driversNumber’).expand();
$w(‘#driversState’).expand();
else
$w(‘#dob’).collapse();
$w(‘#directions’).collapse();
$w(‘#driversNumber’).collapse();
$w(‘#driversState’).collapse()
if ($w(‘#dropdownTri’).value === ‘INL’)
$w(‘#dob’).expand();
$w(‘#directions’).expand()
else
$w(‘#dob’).collapse();
$w(‘#directions’).collapse()
if ($w(‘#dropdownTri’).value === ‘Brookhaven’)
$w(‘#dob’).expand();
$w(‘#directions’).expand()
else
$w(‘#dob’).collapse();
$w(‘#directions’).collapse()
}

5

Vicent, I’ve checked your code. maybe you forgot some brackets. Try this one

export function dropdownTri_change(event) {
if ($w('#dropdownTri').value === 'Sandia')
{$w('#dob').expand();
$w('#directions').expand();
$w('#driversNumber').expand();
$w('#driversState').expand()}
else
{$w('#dob').collapse();
$w('#directions').collapse();
$w('#driversNumber').collapse();
$w('#driversState').collapse()}
if ($w('#dropdownTri').value === 'INL')
{$w('#dob').expand();
$w('#directions').expand()}
else
{$w('#dob').collapse();
$w('#directions').collapse()}
if ($w('#dropdownTri').value === 'Brookhaven')
{$w('#dob').expand();
$w('#directions').expand()}
else
{$w('#dob').collapse();
$w('#directions').collapse()}
}
6

You are in the right direction, however you need to be opening and closing the conditions of your dropdown values in curly brackets which are the open { and closed } symbols in your code.

You also have parentheses in your code too which are the open ( and the closed ).

Both of these need to have equal pairs of them so where ever you have a opening { or a (, then you must have a matching closed } or ) to go with it to end your code.

You are getting the parsing error message as you have not included the open { and closing } on your dropdown value lines and on your else lines too.

You code should be like this.

export function dropdownTri_change(event) {
if ($w('#dropdownTri').value === 'Sandia') {
    $w('#dob').expand();
    $w('#directions').expand();
    $w('#driversNumber').expand();
    $w('#driversState').expand();
    } else {
    $w('#dob').collapse();
    $w('#directions').collapse();
    $w('#driversNumber').collapse();
    $w('#driversState').collapse();
 }
 
if ($w('#dropdownTri').value === 'INL') {
    $w('#dob').expand();
    $w('#directions').expand();
    } else {
    $w('#dob').collapse();
    $w('#directions').collapse();
 }
 
if ($w('#dropdownTri').value === 'Brookhaven') {
    $w('#dob').expand();
    $w('#directions').expand();
    } else {
    $w('#dob').collapse();
    $w('#directions').collapse();
    }
  }
7

However, as your choices for INL and Brookhaven are exactly the same, then you can wrap those two up together and then you only need the code for Sandia and INL/Brookhaven as shown in this sample code below and on this test page here
https://givemeawhisky.wixsite.com/dropdowntest

Also, as your INL and Brookhaven are the same, you might want to change your dropdown choice options to simply Sandia or INL / Brookhaven, however that is your own design choice.

You can see the two versions if you click on the button to go between the two or three choices.

export function dropdownTri_change(event) {
if ($w('#dropdownTri').value === 'Sandia') {
$w('#dob').expand();
$w('#directions').expand();
$w('#driversState').expand();
$w('#driversNumber').expand();
} else {
$w('#dob').collapse();
$w('#directions').collapse();
$w('#driversState').collapse();
$w('#driversNumber').collapse();
}

if ($w('#dropdownTri').value === 'INL' || $w('#dropdownTri').value === 'Brookhaven') {
if ($w('#dob').collapsed) {
$w('#dob').expand();
$w('#directions').expand()
} else {
$w('#dob').collapse();
$w('#directions').collapse();
}
}
}
8

Just to mention, that if you changed your design to just the two options only in your dropdown list, then you would need to change your code to this.

export function dropdownTri_change(event) {
if ($w('#dropdownTri').value === 'Sandia') {
$w('#dob').expand();
$w('#directions').expand();
$w('#driversState').expand();
$w('#driversNumber').expand();
} else {
$w('#dob').collapse();
$w('#directions').collapse();
$w('#driversState').collapse();
$w('#driversNumber').collapse();
}

if ($w('#dropdownTri').value === 'INL/Brookhaven') {
if ($w('#dob').collapsed) {
$w('#dob').expand();
$w('#directions').expand()
} else {
$w('#dob').collapse();
$w('#directions').collapse();
}
}
}
9

Thank You! I appreciate your time and guidance.

10

@givemeawhisky Thank you for working with me and being patient.

11

@givemeawhisky I was hoping to use your knowledge one more time. I have a repeater I am using to allow guests to search a data base to see what we have on file. It works, but the first time it is used ( and only the first time), just for a second the repeater shows/repeats the entire data base and then disappears and only shows what was searched. After the first time it works fine. Could you look at the code and let me know what I am missing or doing wrong again?

export function button25_click(event) {
$w(‘#dataset2’).setFilter(
wixData.filter()
.eq(‘firstName’, $w(‘#Searchbar’).value)
);
$w(‘#repeater1’).expand()
}