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
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"},
];
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
ok i've fixed it, it was because of the fullstops. Now i must go to bed
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
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.
Thanks Give me Whisky i just had to get it right first time :) it took me a while to get there
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"}, ];
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"}, ];
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
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