Multistage Form Auto Switch States

Ask the community
,
1

I’ve got a multistep form, I’m want it so when the user clicks an option it goes straight to the next step in the form. In this case I’m using a group of radio buttons.

Can someone help me on what code to use please?

2

Why not building your own “Multistep-Form” , for example by using “Multistate-Box” ?

Here an similar example, which could also work in your case…
https://russian-dima.wixsite.com/meinewebsite/little-quiz

3

Thanks for the reply.

Even with that form I have to click a button. There must be some code so where the client clicks there selection & it goes to the next stage on the form?

4

You will find your answer here…
wix.com/velo/reference/$w/radiobuttongroup/onchange

Start an event immediately when the choice of a RadioButtonGroup has changed

5

@russian-dima Sorry my coding skills are little to non I’m trying this code below but it seems far too simple, do I need an event handler?

$w( “#radioGroup1” ).onChange( (event) => {
$w( ‘#statebox1’ ).changeState( “stateboxFormState4” );
});

6

@phil18799 I will give you an example:

Let us say you have a Radio-Button-Group which consists of 3-radio-buttons.
When you click each of the 3 given radio-buttons, a different functions starts for every button.

import {local} from 'wix-storage';

$w.onReady(function () {
  $w("#myRadioGroup").onChange(()=>{
     let selectedIndex = $w("#myRadioGroup").selectedIndex
     console.log(selectedIndex)
     if (selectedIndex===0) {function1();}
     if (selectedIndex===1) {function2();}
     if (selectedIndex===2) {function3();}
  });
});


function function1(){... here the first function ...}
function function2(){... here the second function ...}
function function3(){... here the third function ...}

The event-handler is already existing —> “onChange”. Everytime when you change the value of the radio-button, it does some action (in this example it is calling one of the given 3-functions, depending on which radio-button was clicked).

I hope it help you to understand the code.

Good luck and happy coding. :wink:

7

Thank you I’ve managed to get the multistage form now to switch stages upon selection using the code below. I’ve used this multiple times for each new state.

import {local} from ‘wix-storage’ ;

$w.onReady( function () {
$w( “#radioGroup1” ).onChange(()=>{
let selectedIndex = $w( “#radioGroup1” ).selectedIndex
console.log(selectedIndex)
if (selectedIndex=== 0 ) {function1();}
if (selectedIndex=== 1 ) {function2();}
if (selectedIndex=== 2 ) {function3();}
});
});

function function1(){$w( ‘#statebox1’ ).changeState( “stateboxFormState4” )}
function function2(){$w( ‘#statebox1’ ).changeState( “stateboxFormState4” )}
function function3(){$w( ‘#statebox1’ ).changeState( “stateboxFormState4” )}

8

I’m glad if i could help you.

You could do it even more efficient…like this…

import {local} from 'wix-storage';

$w.onReady(function () {
    $w("#radioGroup1").onChange(()=>{
        let selectedIndex = ($w("#radioGroup1").selectedIndex).toString()
        console.log(selectedIndex)
        $w('#statebox1').changeState(selectedIndex)
    });
});

All you will have to change are the STATE-IDs of each STATE in your MSB(multi-state-box) ----> “1” / “2” / “3” and so on…

Good luck.

9

@russian-dima It’s only entering the 1st part of the multi stage form into the database?

10

@phil18799 DATABASE???
There is any code for entering something into a database.
Elaborate your question in a new post if you have expanded your code.

11

@russian-dima I’ve used this same code above for each stage on my form, changing the function numbers sequentially. The problem the form is only gathering the answer to the 1st question on the 1st stage of the form.