Clicking 3 Buttons to change MultiState Box

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.

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


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.

@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.
}

@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’.

@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.
}