Help with custom multistep form

Ask the community
, ,
4

@beckettla Yeah, sure … But since I don’t know the elements IDs for sure, you might need to double check them. But before that, you have some elements that are placed outside the page’s onReady() function, please move them inside it to avoid any errors.

$w.onReady(() => {
    let answers = {};
    
    $w('#progressBar1').targetValue = 11;
    $w('#progressBar1').value = 1;
    $w('#progressBar2').targetValue = 11;
    $w('#progressBar2').value = 2;
    $w('#progressBar3').targetValue = 11;
    $w('#progressBar3').value = 3;
    $w('#progressBar4').targetValue = 11;
    $w('#progressBar4').value = 4;
    $w('#progressBar5').targetValue = 11;
    $w('#progressBar5').value = 5;
    $w('#progressBar6').targetValue = 11;
    $w('#progressBar6').value = 5;
    $w('#progressBar7').targetValue = 11;
    $w('#progressBar7').value = 6;
    $w('#progressBar8').targetValue = 11;
    $w('#progressBar8').value = 6;
    $w('#progressBar9').targetValue = 11;
    $w('#progressBar9').value = 7;
    $w('#progressBar10').targetValue = 11;
    $w('#progressBar10').value = 8;
    $w('#progressBar11').targetValue = 11;
    $w('#progressBar11').value = 9;
    $w('#progressBar12').targetValue = 11;
    $w('#progressBar12').value = 10;
    $w('#progressBar13').targetValue = 11;
    $w('#progressBar13').value = 11;
    let isValid = $w("#input13").valid;
})

Next, you need to register the selected values in an array, use the onClick() event handler that you’re already using save the values.

export function q1submit_click(event) {
    let q1 = $w('#orgYorN').value;
    answers.q1 = q1;
    
    // And do the rest as you do
    let selectedValue = $w('#orgYorN').selectedIndex;
    if(selectedValue ===0) {
        $w('#funnelQuiz01').changeState("q2")
    } else {
        $w('#funnelQuiz01').changeState("sorry")
    }
}

At the end, you’ll end up with an object that contains all the answers. It’ll look something like this:

console.log(answers);

/*
answers = {
    q1: "Yes",
    q2: "No I don't want that",
    q3: "...",
    q4: "...",
    ...
    ...
    q11: "Some answer",
    q12: "The final answer"
}
*/

Hope you find this useful.