How can I save answers to questions on multi-state form using this code?

So this code is to skip to the next question after the customer has answered a question, only problem is that it’s only saving the 1st answer to the 1st question.

$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();}
if (selectedIndex=== 3 ) {function4();}
});
});

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

$w.onReady( function () {
$w( “#radioGroup2” ).onChange(()=>{
let selectedIndex = $w( “#radioGroup2” ).selectedIndex
console.log(selectedIndex)
if (selectedIndex=== 0 ) {function5();}
if (selectedIndex=== 1 ) {function6();}
if (selectedIndex=== 2 ) {function7();}
if (selectedIndex=== 4 ) {function8();}
if (selectedIndex=== 5 ) {function9();}
});
});

function function5(){$w( ‘#statebox1’ ).changeState( “stateboxFormState5” )}
function function6(){$w( ‘#statebox1’ ).changeState( “stateboxFormState5” )}
function function7(){$w( ‘#statebox1’ ).changeState( “stateboxFormState5” )}
function function8(){$w( ‘#statebox1’ ).changeState( “stateboxFormState5” )}
function function9(){$w( ‘#statebox1’ ).changeState( “stateboxFormState5” )}

$w.onReady( function () {
$w( “#radioGroup3” ).onChange(()=>{
let selectedIndex = $w( “#radioGroup1” ).selectedIndex
console.log(selectedIndex)
if (selectedIndex=== 0 ) {function10();}
if (selectedIndex=== 1 ) {function11();}
if (selectedIndex=== 2 ) {function12();}
if (selectedIndex=== 3 ) {function13();}
});
});

function function10(){$w( ‘#statebox1’ ).changeState( “stateboxFormState6” )}
function function11(){$w( ‘#statebox1’ ).changeState( “stateboxFormState6” )}
function function12(){$w( ‘#statebox1’ ).changeState( “stateboxFormState6” )}
function function13(){$w( ‘#statebox1’ ).changeState( “stateboxFormState6” )}

I thought, that i already showed you how to manage this problem last time :sweat_smile:

This is what you will need…

$w.onReady(function () {
   $w("#radioGroup1").onChange(()=>{
      let selectedIndex = $w("#radioGroup1").selectedIndex
      console.log("Selected-Index: ", selectedIndex)
      {$w('#statebox1').changeState("stateboxFormState"+selectedIndex);}
   });
});

Every-time you make a choice on the radio-button-group, you also change the —> INDEX!
Index-0
Index-1
Index-2
Index-3
…and so on…

That means —> you also should have the related STATES in your state-box…

stateboxFormState0
stateboxFormState1
stateboxFormState2
stateboxFormState3
....and so on .....

This code I’ve used works to move through the states as it should but it’s only submitting data from radiogroup1.

I can’t get this new code to work correct & when I do submit a form it doesn’t submit it to the submission table either.

@phil18799

This code I’ve used works to move through the states as it should but it’s only submitting data from radiogroup1.

Yes, exactly!
This code is just for one Radiobutton-Group.

$w.onReady(function () {
   $w("#radioGroup1").onChange(()=>{
      let selectedIndex = $w("#radioGroup1").selectedIndex
      console.log("Selected-Index: ", selectedIndex)
      $w('#statebox1').changeState("stateboxFormState"+selectedIndex);
   });
});

Sorry i do not know your project setup.
I just saw that you make here a mistake…

function function10(){$w('#statebox1').changeState("stateboxFormState6")} 
function function11(){$w('#statebox1').changeState("stateboxFormState6")} 
function function12(){$w('#statebox1').changeState("stateboxFormState6")} 
function function13(){$w('#statebox1').changeState("stateboxFormState6")}

…because you refer everytime to the same STATE, no matter on wich R-Button you click, you will always get shown —> “stateboxFormState6”
And this is surely not what you want!

@russian-dima

Yes I’ve copied that code & then changed it to radiogroup2. Sorry it doesn’t move through the states as it should, radio option 1 does nothing, radio option 2 takes me to stage 2, radio option 3 to stage 3 etc. So if I go to option 2 & try radiogroup2 it then also works the same way but doesn’t submit that data to the submission table.

Yes I want it to work like that, the idea of the form is to collect information about a potential customer, they enter their contact details at the end of the form too, non of which is collected in the submission table.

@phil18799

…radio option 1 does nothing…
stateboxFormState0
stateboxFormState1
stateboxFormState2
stateboxFormState3
Radio-Option1 does nothing because the index starts with —> 0
And you surely do NOT have —> “stateboxFormState0”

You should read my posts more carefully.

You have two options to solve it.

  1. Change your state-IDs (from 0)
2) change your CODE ---> $w('#statebox1').changeState("stateboxFormState"+selectedIndex+1);

Now it would start with —> 1 and not with 0.

So if I go to option 2 & try radiogroup2 it then also works the same way but doesn’t submit that data to the submission table.
Where is your submission-code-part for submitting something somewhere?
I do not see this code-part .
Perhaps you should show your form and describe what & how exactly should work your form.

@russian-dima
I’ve not got the code to submit the data, it is submitting the data from the 1st state.

The way it should work it is how it does now by going to forward 1 state upon clicking a radio button, this is done with the original code you helped me with apart from it needs to submit the data from all the fields on each state rather than just the field from the 1st state.

Link to the form:
https://www.ukdebtaid.co.uk/apply

As I’ve said I’m not code saavy so all the help I can get I appreciate.