Cascading Form Help

Hi i have tried to use the example to create a cascading form, it partially works but i cannot get a different choice from the first dropdown to render options in the second dropdown.

I have used family relationships as an example here. If i select Father in the first dropdown then the options might include, father or dad but they will only show options based on selection for a mother?

Dropdown 6 is the first dropdown on the page
Dropdown 7 is the send based on the selection made in dropdown 6

import {myMother, myFather} from ‘public/personalRelationshipTerm’;

$w.onReady( function () {
$w(’ #dropdown7 ‘).options = myMother;
$w(’ #dropdown6 ‘).onChange(() => {
if ($w(’ #dropdown6 ‘).value === ‘mymother’) {
$w(’ #dropdown7 ‘).options = myMother;
$w(’ #dropdown7 ‘).placeholder = ‘What did you call your Mother’;
$w(’ #dropdown7 ‘).enable();
}
else if ($w(’ #dropdown6 ‘).value === ‘MyFather’) {
$w(’ #dropdown7 ‘).options = myFather;
$w(’ #dropdown7 ‘).placeholder = ‘What did you call your Father’;
$w(’ #dropdown7 ‘).enable();
}
else {
$w(’ #dropdown7 ‘).value = ‘’;
$w(’ #dropdown6 ').disable();
}
});
});

The public file looks like this

  1. export const myMother = [

  2. {value:“”, label: “What did you call your Mother?”},

  3. {value:“myMother”, label: “My Mother”},

  4. {value:“Mother”, label: “Mother”},

  5. {value:“Mum”, label: “Mum”},

  6. {value:“Mom”, label: “Mom”},

  7. {value:“myMummy”, label: “My Mummy”},

  8. ];

  9. export const myFather = [

  10. {label: “What did you call your Father”, value: “”},

  11. {label: “My Father”, value: “myFather”},

  12. {label: “Father”, value: “father”},

  13. ];
    It’s annoying because there is probably something quite simple that needs to be added or removed but i can’t see what?
    Thanks Adam

Update: solved. I just had to make sure that all entries were in the same case i.e. upper case for code, js and page code
Regards
Adam

1 Like

It does work and I’ve sorted it out so it does work. I have just taken the example in a new site and tested it with your code. https://www.wix.com/corvid/example/cascading-form

Wix Corvid Example Code

Page Code

import {usStates, canadaStates} from 'public/states';

$w.onReady(function() {
$w('#state').options = usStates;
$w('#country').onChange(() => {
if ($w('#country').value === 'United States') {
$w('#state').options = usStates;
$w('#state').placeholder = 'Select a State';
$w('#state').enable();
}
else if ($w('#country').value === 'Canada') {
$w('#state').options = canadaStates;
$w('#state').placeholder = 'Select a Province';
$w('#state').enable();
}
else {
$w('#state').value = '';
$w('#state').disable();
}
});
});

states.js Code

export const usStates = [
{value:"", label: "Select a state"},
{value:"AL", label: "Alabama"},
{value:"AK", label: "Alaska"},
{value:"AZ", label: "Arizona"},
{value:"AR", label: "Arkansas"},
{value:"CA", label: "California"},
{value:"CO", label: "Colorado"},
{value:"CT", label: "Connecticut"},
{value:"DE", label: "Delaware"},
{value:"FL", label: "Florida"},
{value:"GA", label: "Georgia"},
{value:"HI", label: "Hawaii"},
{value:"ID", label: "Idaho"},
{value:"IL", label: "Illinois"},
{value:"IN", label: "Indiana"},
{value:"IA", label: "Iowa"},
{value:"KS", label: "Kansas"},
{value:"KY", label: "Kentucky"},
{value:"LA", label: "Louisiana"},
{value:"ME", label: "Maine"},
{value:"MD", label: "Maryland"},
{value:"MA", label: "Massachusetts"},
{value:"MI", label: "Michigan"},
{value:"MN", label: "Minnesota"},
{value:"MS", label: "Mississippi"},
{value:"MO", label: "Missouri"},
{value:"MT", label: "Montana"},
{value:"NE", label: "Nebraska"},
{value:"NV", label: "Nevada"},
{value:"NH", label: "New Hampshire"},
{value:"NJ", label: "New Jersey"},
{value:"NM", label: "New Mexico"},
{value:"NY", label: "New York"},
{value:"NC", label: "North Carolina"},
{value:"ND", label: "North Dakota"},
{value:"OH", label: "Ohio"},
{value:"OK", label: "Oklahoma"},
{value:"OR", label: "Oregon"},
{value:"PA", label: "Pennsylvania"},
{value:"RI", label: "Rhode Island"},
{value:"SC", label: "South Carolina"},
{value:"SD", label: "South Dakota"},
{value:"TN", label: "Tennessee"},
{value:"TX", label: "Texas"},
{value:"UT", label: "Utah"},
{value:"VT", label: "Vermont"},
{value:"VA", label: "Virginia"},
{value:"WA", label: "Washington"},
{value:"WV", label: "West Virginia"},
{value:"WI", label: "Wisconsin"},
{value:"WY", label: "Wyoming"},
];

export const canadaStates = [
{label: "Alberta", value: "AB"},
{label: "British Columbia", value: "BC"},
{label: "Manitoba", value: "MB"},
{label: "New Brunswick", value: "NB"},
{label: "Newfoundland and Labrador", value: "NL"},
{label: "Nova Scotia", value: "NS"},
{label: "Northwest Territories", value: "NT"},
{label: "Nunavut", value: "NU"},
{label: "Ontario", value: "ON"},
{label: "Prince Edward Island", value: "PE"},
{label: "Quebec", value: "QC"},
{label: "Saskatchewan", value: "SK"},
{label: "Yukon",  value: "YT"},
];

Your Example Code

Page Code

import {myMother, myFather} from 'public/personalRelationshipTerm';

$w.onReady(function() {
$w('#dropdown7').options = myMother;
$w('#dropdown6').onChange(() => {
if ($w('#dropdown6').value === 'My Mother') {
$w('#dropdown7').options = myMother;
$w('#dropdown7').placeholder = 'What do you call your Mother?';
$w('#dropdown7').enable();
}
else if ($w('#dropdown6').value === 'My Father') {
$w('#dropdown7').options = myFather;
$w('#dropdown7').placeholder = 'What do you call your Father';
$w('#dropdown7').enable();
}
else {
$w('#dropdown6').value = '';
$w('#dropdown6').disable();
}
});
});

personalRelationshipTerm.js Code

export const myMother = [
{value:"", label: "What did you call your Mother?"},
{value:"myMother", label: "My Mother"},
{value:"Mother", label: "Mother"},
{value:"Mum", label: "Mum"},
{value:"Mom", label: "Mom"},
{value:"myMummy", label: "My Mummy"},
];

export const myFather = [
{label: "What did you call your Father", value: ""},
{label: "My Father", value: "myFather"},
{label: "Father", value: "father"},
];

Thanks Give me Whisky i just had to get it right first time :slight_smile: it took me a while to get there

1 Like

Finally, Nayeli (Code Queen) has a good example of this herself that you can look at with full code and setup given etc.
Conditional Filtering for Dropdowns on Wix | Corvid Tutorial - Youtube video for tutorial
https://codequeen.wixsite.com/dropdown - Website for tutorial

The only difference being that Nayeli has put the onChange event handlers through the properties panel, whereas the code for the Wix Corvid example has the onChange event handlers written into the code itself, so that you do not need to add the onChange event in the properties panel.

Oops sorry, I hadn’t refreshed the page to see your earlier reply about sorting it. I did the testing and then got distracted by kids wanting food for tea, so only just got around to posting it!

Anyways, glad you got it working before, the only thing I will mention is that the Wix Corvid tutorial always makes the first option (in your case Mother) have the repeated label on the second dropdown, whereas when you go to another option (Father with yours) you don’t get that repetition.

So you might want to have a little play around with it on the actual dropdown settings itself, although I think if you take off that then the first option will simply end up with an empty dropdown.

Hi all,
This has not gone well for me. I tried to replicate the my previous code and failed miserably for some reason and decided to try this code from Code Queen who is very clear also but i just can’t get it today / tonight (7hrs plus trying)
#prefix is the first dropdown with the managed choices pre-populated
#subPrefix is the second dropdown
so what this code actually runs in the second dropdown is “This person is titled as a Mr.?”,“Mr.”, but no other exports
I think i have copied my previous working code, like for like with a couple of changes like dropdown names and values.
The only thing that is different with this code is a fullstop after Mr. for example
j.s
export const Mr = [
{ value:“”, label: “This person is titled as a Mr.?”},
{ value:“Mr”, label: “Mr.”},
];
export const Mrs = [
{ value:“”, label: “This person is titled as a Mrs.?”},
{ value:“Mrs”, label: “Mrs.”},
];
export const Mx = [
{ value:“”, label: “This person is titled as Gender Neutral?”},
{ value:“Mx”, label: “Mx.”},
];
Page code
$w.onReady( function () {
$w(‘#subPrefix’).options = Mr;
$w(‘#prefix’).onChange(() => {
if ($w(‘#prefix’).value === ‘Mr.’) {
$w(‘#subPrefix’).options = Mr;
$w(‘#subPrefix’).placeholder = ‘What did you call your Mother’;
$w(‘#subPrefix’).enable();
}
else if ($w(‘#prefix’).value === ‘Mrs.’) {
$w(‘#subPrefix’).options = Mrs;
$w(‘#subPrefix’).placeholder = ‘What did you call your Father’;
$w(‘#subPrefix’).enable();
}
else if ($w(‘#prefix’).value === ‘Mx.’) {
$w(‘#subPrefix’).options = Mx;
$w(‘#subPrefix’).placeholder = ‘Special term for your Friend’;
$w(‘#subPrefix’).enable();
}
});
});
note: i left the placeholder text on the page code because this is being replaced by the j.s code in public, i think?
Dropdown manage choices

Mr
Mr
Mrs
Mrs
Etc.
Etc.

Thanks in advance
Adam

ok i’ve fixed it, it was because of the fullstops. Now i must go to bed