Question about cascading form

Ask the community
,
1

Hello there!
I’m trying to setup input form using cascading form . I’ve succeed with 2 drop downs, but I would like to add third. How should I change that code to make it notice input from third drop down?

In my case, I have first drop down to choose continent , second to choose country and third to choose city . In example: If I choose Europe and then Finland → I have to choose Finnish cities, but if I change country to Sweden → it will show Swedish cities (without resetting continent), and if I change continent it will reset countries and cities → start all again (choose country → city).

I have two (2) .js’s. One with list of countries and other with cities (and continent’s are listed in firs drop down (like in cascading form example)). For now main code looks like:

import {
	clear, Europe, America, Asia
}
from 'public/country';
import {
	Finland, Sweden, Canada, USA, China, Japan
}
from 'public/city';

$w.onReady(function() {
	$w('#country').options = clear;
	$w('#continent').onChange(() => {
		if ($w('#continent').value === 'Europe') {
			$w('#country').options = Europe;
			$w('#country').placeholder = 'Select a country';
			$w('#country').enable();
		}
		else if ($w('#continent').value === 'America') {
			$w('#country').options = America;
			$w('#country').placeholder = 'Select a country';
			$w('#country').enable();
		}
		else if ($w('#continent').value === 'Asia') {
			$w('#country').options = Asia;
			$w('#country').placeholder = 'Select a country';
			$w('#country').enable();
		}
		else {
			$w('#country').value = '';
			$w('#country').disable();
		}
	});
});

Thanks for your attention. I’m looking forward to your reply.

1 Like
2

I have the same question.

3

Hi,
You can add a new internal condition like this:

if ($w('#country').value === 'Some Value') {
   $w('#thirdDropdown').options = arrayOfOptions;
   $w('#thirdDropdown').placeholder = 'Select something';
   $w('#thirdDropdown').enable();
   
}

Good luck!
Roi.

4

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. The first dropdown will only show the same options

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”},
];

Thanks Adam

5

It would be super helpful if someone could see what is wrong here

thanks
Adam