0

我正在尝试通过 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，以便在 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);
                    }
                });         
            })
    });
4

1 回答 1

2

id 这样做的方式只是有一个 div 来包含您的步骤

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

类似的东西。

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

一旦你有这个返回的 html 或基于来自服务器的响应在 javascript 中构建新的 html，你可以用stepContainer新的 html 替换 的内容。这将作为第 2 步。

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

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

于 2012-07-16T09:28:21.017 回答