Question

I am trying to create a multi step form by getting questions and answer alternatives from a mysql database through php/ajax (No page reload is necessary). I do however seem to have problems submitting the data if a .php page generates all the divs(at least that is a theory as to why it won’t work). The way I am trying to do it seems to work fine if I write it all directly in HTML, but that would not be dynamic and therefore useless for this particular task. Is it possible to create a form like psuedo-coded underneath?

<div>
 <div id="stepone" class="section"> </div>
 <div id="steptwo" class="section"> </div>
 <div id="stepthree" class="section"> </div>
 <div id="stepfour" class="section"> </div>
</div>

And then have a PHP site generate the input tags and assign it to the correct div, so that the divs are created in HTML/JS but the inputs like checkboxes and textareas are generated dynamically through PHP. I can’t seem to think of a good way to do this?

Worth mentioning that this page is made in JQM (jQuery Mobile) so I think the different div-roles can appear problematic for this task.

A generated question in my PHP script will be something like this:

<form id="eval_form">
 <h3>Hva tenkte du om møtet?</h3>
  <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="2">   
   <input type="checkbox" name="res[2][1]" id="2_1" value="1"><label for="2_1">asd1</label>
   <input type="checkbox" name="res[2][2]" id="2_2" value="2"><label for="2_2">asd2</label>
   <input type="checkbox" name="res[2][3]" id="2_3" value="3"><label for="2_3">asd3</label>
  </fieldset>
 <h3>Hva følte du om møtet?</h3>
  <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="3"> 
   <input type="checkbox" name="res[3][1]" id="3_1" value="1"><label for="3_1">test1</label>
   <input type="checkbox" name="res[3][2]" id="3_2" value="2"><label for="3_2">test2</label>
   <input type="checkbox" name="res[3][3]" id="3_3" value="3"><label for="3_3">test3</label>
   <input type="checkbox" name="res[3][4]" id="3_4" value="4"><label for="3_4">test4</label>
  </fieldset>
 <input type="button" id="submit" value="Submit" class="submit-btn">
</form>

The code for my demo program looks like this, and it has no problems being posted:

<form id="eval_form">

        <!-- STEP 1-->
        <div data-role="content" id="form1" class="section">
            <input type="text" name="answer[1]" placeholder="Write something..." class="required"></input><p/>
            <input type="text" name="answer[2]" placeholder="Write something..." class="required"></input><p/>
            <input type="button" name="next1" value="Next" id="next1" onClick="toggleVisibility('form2')" class="next-btn"/>
        </div>

        <!-- STEP 2-->
        <div data-role="content" id="form2" class="section">
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                <input type="radio" name="answer[4]" id="1" value="1" class="required"/><label for="1">Value 1</label>
                <input type="radio" name="answer[4]" id="2" value="2" class="required"/><label for="2">Value 2</label>
                <input type="radio" name="answer[4]" id="3" value="3" class="required"/><label for="3">Value 3</label>
            </fieldset>
            <input type="button" id="back2" value="Back" onClick="toggleVisibility('form1')" class="back-btn">
            <input type="button" name="next2" value="Next" id="next2" onClick="toggleVisibility('form3')" class="next-btn"/>
        </div>

        <!-- STEP 3-->
        <div data-role="content" id="form3" class="section">
            <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" class="required">
                <input type="checkbox" name="answer[5][1]" id="1" value="1"/><label for="1">Testie</label>
                <input type="checkbox" name="answer[5][2]" id="2" value="2"/><label for="2">Testoe</label>
                <input type="checkbox" name="answer[5][3]" id="3" value="3"/><label for="3">Tester</label>
            </fieldset>
            <input type="text" name="answer[3]" placeholder="Write something..." class="required"></input><p/>
            <input type="button" id="back3" value="Back" class="back-btn" onClick="toggleVisibility('form2')">
            <input type="button" id="submit" value="Submit" class="submit-btn"/>
        </div>

    </form>

Ajax function to send the data:

$(document).ready(function()
    {
            $("#submit").click(function() 
            {
                var data_string = $('#eval_form').serialize();
                $.ajax(
                {
                    type:'POST',
                    url:'add.php',
                    data:data_string,
                    success:function(response)
                    {
                        $("#eval").html(response);
                    }
                });         
            })
    });

Answer 1

The way id do it is just have a single div to contain your steps

<div id="stepContainer" >
    <input type="text" id="step1Input" />
</div>

Something like that.

The ajax query will take any elements within the step container and submit them appropriatley via GET/POST to your php/asp whatever page does your server logic. When it returns it can return some confirmation or the html required for the next step.

Once you have this returned html or built the new html in javascript based on the response from the server you can replace the contents of the stepContainer with the new html. This will then act as step 2.

You may want to have a hidden div or some counter in javascript to keep track of which is your current step.

It may even be wise to use json return from the server which can allow you to pass more information across (well more easily anyway), allowing you to have error messages, confirmations, html etc embedded in the single response.