php - 将输入分配给 div？

Question

我正在尝试通过 php/ajax 从 mysql 数据库获取问题和答案替代方案来创建多步骤表单(无需重新加载页面)。然而，如果 .php 页面生成所有 div，我似乎在提交数据时遇到问题(至少这是一个关于为什么它不起作用的理论)。如果我直接用 HTML 编写所有内容，我尝试的方法似乎工作得很好，但这不是动态的，因此对于这个特定任务来说毫无用处。是否可以在下面创建一个类似伪编码的表单？

<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>

然后让 PHP 站点生成 input 标签并将其分配给正确的 div，以便在 HTML/JS 中创建 div，但像复选框和文本区域这样的输入是通过 PHP 动态生成的。我似乎想不出一个好的方法来做到这一点？

值得一提的是，此页面是用 JQM (jQuery Mobile) 制作的，因此我认为不同的 div 角色对于此任务可能会出现问题。

我的 PHP 脚本中生成的问题将如下所示:

<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>

我的演示程序的代码如下所示，并且发布没有问题:

<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函数发送数据:

$(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

id 的做法就是用一个 div 来包含您的步骤

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

类似的事情。

ajax 查询将获取步骤容器中的任何元素，并通过 GET/POST 将它们适本地提交到您的 php/asp，无论您的服务器逻辑是什么页面。当它返回时，它可以返回一些确认信息或下一步所需的 html。

一旦您返回了 html 或根据服务器的响应在 javascript 中构建了新的 html，您就可以用新的 html 替换 stepContainer 的内容。这将作为步骤 2。

您可能希望在 javascript 中有一个隐藏的 div 或一些计数器来跟踪您当前的步骤。

使用从服务器返回的 json 可能是明智的，它可以让您传递更多信息(无论如何更容易)，允许您在单个响应中嵌入错误消息、确认、html 等。