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站点生成输入标签并将其分配给正确的div，以便div在HTML / JS中创建，但复选框和textareas等输入是通过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等。

将输入分配给div？

1 个答案: