Question

Could anyone please give me an example of how to create a multple step form where each stage is submitted by onClick then using hidden inputs or variables to store the values from previous pages?

For example:

Step 1…

<input type="radio" name="group1" value="yes" onclick="this.form.submit()" />

<input type="radio" name="group1" value="no" onclick="this.form.submit()" />

Step 2…

<input type="radio" name="group2" value="100" onclick="this.form.submit()" />

<input type="radio" name="group2" value="200" onclick="this.form.submit()" />

<input type="radio" name="group2" value="300" onclick="this.form.submit()" />


<!-- previous input -->
<input type="hidden" name="group1" value="200" />

Thanks!

Answer 1

So as i said in the comment, create only one form: (code is highly unformatted and serves only for comprehension purposes)

<form>
     <input class='step1input'/>
     <input class='step1input'/>
      <input class='step2input'/>
     <input class='step2input'/>
     ...
 </form>

at the first step hide the inputs that dont belong there (step2input classes)

at second step, hide the other inputs (step1input classes)

etc…

at the end of the last step you submit the ENTIRE form

EDIT: what you’re doing is fine, only, instead of submitting the form, you just hide the elements. use a jquery or javascript function like this:

 function goToNextStep(currentStep){
    if (currentStep==1) {
       $('input[name='group1']').hide();
       $('input[name='group2']').show();
    }else if (currentStep==2){
         ...
    }
    ...
    else if (currentStep==lastStep){
        document.form.submit();
    }
 }

Step 1…

<input type="radio" name="group1" value="yes" onclick="goToNextStep(1)" />

<input type="radio" name="group1" value="no" onclick="goToNextStep(1)" />

Step 2…

<input type="radio" name="group2" value="100" onclick="goToNextStep(2)" />

<input type="radio" name="group2" value="200" onclick="goToNextStep(2)" />

<input type="radio" name="group2" value="300" onclick="goToNextStep(2)" />