Clicking 3 Buttons to change MultiState Box

Ask the community
,
1

Hi, I have a multi-state box which I am trying to change the state by having to select 3 buttons. I have the code for changing the state with 1 button:

$w . onReady ( function () {
$w ( “#button1” ). onClick (() => {
$w ( ‘#myStatebox’ ). changeState ( “state2” );
} );
$w ( “#button2” ). onClick (() => {
$w ( ‘#myStatebox’ ). changeState ( “state1” );
} );
});

But am wondering if anyone can help with the code on how to have to click 3 buttons to change state.

2

Each of them should change the state, or all of them together have to be clicked?

3

1810×1292 151 KB

They would need to select one option from each question to change the state and on each state I have a price quote at the bottom depending on their selections.

4

@josh-hall-94
Sorry, I missed your answer.
You should create an onClick event for each button.
Once clicked, save the event.target.id in a global variable.
and check which buttonIds are stored in the global variables and change the status in accordance.

For example:

let perpOrKit = '', days = '', meals = '';
$w.onReady(() => {
$w('#prepButton, #kiButton').onClick(event => {
perpOrKit = event.target.id; 
handleSelection();
})
//do it for the other button types as well
})
function handleSelection(){
if(!perpOrKit || ! days || !meals){return;} //i.e. stop the process if one of the button type hasn't been clicked;
//now check what the value of perpOrKit, days and meals and change the state in acoordance.
}
5

@jonatandor35 Hi thank you for your response. If I provide the button ID’s and state ID for one example can you add them into the code:

If ‘buttonPrep’ ‘buttonDays5’ and ‘buttonMeals1’ are pressed it should go to the state ‘5MealPrep’.

6

@josh-hall-94

let perpOrKit = '', days = '', meals = '';
$w.onReady(() => {
$w('#buttonPrep #buttonMeals1,#5MealPrep').onClick(event => {
perpOrKit = event.target.id; 
handleSelection();
})
//change the following propertyIDs
$w('#daysOpt1, #daysOpt2').onClick(event => {
days = event.target.id; 
handleSelection();
})
//change the following propertyIDs
$w('#numMeals1, #numMeals2, #numMeals3').onClick(event => {
meals = event.target.id; 
handleSelection();
})
})
function handleSelection(){
if(!perpOrKit || ! days || !meals){return;} //i.e. stop the process if one of the button type hasn't been clicked;
//now check what the value of perpOrKit, days and meals and change the state in accordance.
}