Hi everyone, I’m having trouble with a CascadingForm using the example of: https://www.wix.com/corvid/example/cascading-form I have created my own code but it doesn’t seems to work properly.
online site: https://www.ricommendo.com/submit-request
When Selecting “Type of Experience” Well Being or Entrepreneurs (first and last of the list) doesn’t work. When selecting either of the rest it does work well.
Here are the codes:
PAGE CODE:
import { WellBeing, Hipster, Essentials, Adventure, RockStarParty, Romantic, EntrepreneursandSmallBusiness } from ‘public/experiences’ ;
$w.onReady( function () {
$w( ‘#Experience’ ).options = WellBeing;
$w( ‘#TypeofExperience’ ).onChange(() => {
if ($w( ‘#TypeofExperience’ ).value === 'WellBeing ’ ) {
$w( ‘#Experience’ ).options = WellBeing;
$w( ‘#Experience’ ).placeholder = ‘Select Experience’ ;
$w( ‘#Experience’ ).enable();
} else if ($w( ‘#TypeofExperience’ ).value === ‘Hipster’ ) {
$w( ‘#Experience’ ).options = Hipster;
$w( ‘#Experience’ ).placeholder = ‘Select Experience’ ;
$w( ‘#Experience’ ).enable();
} else if ($w( ‘#TypeofExperience’ ).value === ‘Essentials’ ) {
$w( ‘#Experience’ ).options = Essentials;
$w( ‘#Experience’ ).placeholder = ‘Select Experience’ ;
$w( ‘#Experience’ ).enable();
} else if ($w( ‘#TypeofExperience’ ).value === ‘Adventure’ ) {
$w( ‘#Experience’ ).options = Adventure;
$w( ‘#Experience’ ).placeholder = ‘Select Experience’ ;
$w( ‘#Experience’ ).enable();
} else if ($w( ‘#TypeofExperience’ ).value === ‘RockStarParty’ ) {
$w( ‘#Experience’ ).options = RockStarParty;
$w( ‘#Experience’ ).placeholder = ‘Select Experience’ ;
$w( ‘#Experience’ ).enable();
} **else if** ($w( '#TypeofExperience' ).value === 'Romantic' ) {
$w( '#Experience' ).options = Romantic;
$w( '#Experience' ).placeholder = 'Select Experience' ;
$w( '#Experience' ).enable();
} **else if** ($w( '#TypeofExperience' ).value === 'EntrepreneursandSmallBusiness' ) {
$w( '#Experience' ).options = EntrepreneursandSmallBusiness;
$w( '#Experience' ).placeholder = 'Select Experience' ;
$w( '#Experience' ).enable();
} **else** {
$w( '#TypeofExperience' ).value = '' ;
$w( '#TypeofExperience' ).disable();
} //TODO: write your page related code here...
});
});
EXPERIENCES.JS CODE:
export const WellBeing = [
{ label: “Type of Experience” , value: “” },
{ label: “Spas” , value: “Spas” },
{ label: “Gym” , value: “Gym” },
{ label: “Crossfit” , value: “Crossfit” },
{ label: “Yoga” , value: “Yoga” },
{ label: “Vegan Shop” , value: “Vegan Shop” },
];
export const Hipster = [
{ label: “Barber Shop” , value: “BarberShop” },
{ label: “Tatoo Artist” , value: “TatooArtist” },
{ label: “Coffee Shop” , value: “CoffeeShop” },
{ label: “Beauty Saloon” , value: “BeautySaloon” },
{ label: “Shopping” , value: “Shopping” },
];
export const Essentials = [
{ label: “Dinner Reservations” , value: “DinnerReservations” },
{ label: “Hotels” , value: “Hotels” },
{ label: “Travel packages” , value: “Travelpackages” },
{ label: “Pet care” , value: “Petcare” },
{ label: “Transportation” , value: “Transportation” },
];
export const Adventure = [
{ label: “Tour guide” , value: “Tourguide” },
{ label: “Surfing” , value: “Surfing” },
{ label: “Festivals” , value: “Festivals” },
{ label: “Sports tickets” , value: “Sportstickets” },
];
export const RockStarParty = [
{ label: “Lounges” , value: “Lounges” },
{ label: “Night Clubs” , value: “NightClubs” },
{ label: “Dj Bookings” , value: “DjBookings” },
{ label: “After Party’s” , value: “AfterParty’s” },
{ label: “Venue rentals” , value: “Venuerentals” },
];
export const Romantic = [
{ label: “Wedding planner” , value: “Wedding planner” },
{ label: “Flower shops” , value: “Flowershops” },
{ label: “Honey moon packages” , value: “Honeymoonpackages” },
];
export const EntrepreneursandSmallBusiness = [
{ label: “Conference rooms” , value: “Conferencerooms” },
{ label: “Travel accommodation” , value: “Travelaccommodation” },
{ label: “Outside the Box-place for meetings” , value: “OutsidetheBox-placeformeetings” },
{ label: “Lunch and dinner reservations” , value: “Lunchanddinnerreservations” },
];