多页表单的策略？

Question

我一直在尝试使用 jQuery Mobile 进行多页投票，该投票应该通过 Ajax/PHP 与我的 MySQL 数据库进行交互，并且已经有一段时间了。由于将表单拆分为多个页面，我似乎在提交表单时遇到了一些问题。我需要的一个要求是该页面不能重新加载页面。

在我的第一次尝试中，我尝试将页面分为以下几部分：

<div id="page1" data-role="page">

无论我如何尝试编码，这都失败了很多次。我无法让提交按钮工作，我认为这可能是由于我已将表单拆分为几个 div“页面”。我还尝试制作下一个/提交按钮而不是“下一个，下一个，下一个...提交”，以便我可以将临时数据存储在会话中，但未成功。

我将我的整个策略重新设计为一个隐藏不活动的问题 div 的代码。我的意思是我有一个将数据角色设置为页面的 div，在其中我有几个 div，其内容的数据角色通过单击带有下一步按钮的表单来隐藏/显示。我设法以这种方式制作了一个小的示例表单，它可以提交整个表单并使用一些 PHP 代码完美地打印出来。但是我还没有成功验证这个版本。我只能让我的脚本验证最后一页，即使那样它也需要检查所有复选框，这是没有意义的。当我尝试将此版本实现到我的真实项目中时，我根本无法将其提交给 .php 脚本，但这可能只是我将继续寻找的一些语法错误。

那么，有没有人做过类似的事情？我正在寻找潜在的其他策略来解决这个问题，或者也许有人对我上述尝试失败的原因有一个理论。似乎 Ajax 表单提交很难在 jQuery Mobile 中工作？

另外，如果有人能发现其中的缺陷，我附上了我用于提交的代码，有没有一种简单的方法可以把它变成一个函数？还是没有意义？

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

我还在 window.onload 期间使用此函数来生成带有冗长 .php 脚本的投票。基本上它会生成问题，其他所有问题类型只有 name="answers[question_id]"。

function getQuestions(id)
        {
            var xmlhttp = getHttpRequestObj();
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById(id).innerHTML=xmlhttp.responseText;
                }
              }
            xmlhttp.open("GET","poll2.php",true);
            xmlhttp.send();
        }

表格如下所示：

<form id="form">
  <div data-role="content" id="form'.$page.'" class="section">
    <fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="'.$question_id.'">
      <input type="checkbox" name="answers['.$question_id.']['.$alt_id.']" id="'.$question_id.'_'.$alt_id.'" value="'.$alt_id.'"/>
        <label for="'.$question_id.'_'.$alt_id.'">'.$alt_desc.'</label>
    </fieldset>
    <input type="button" name="next" value="Next" id="next" onClick="toggleVisibility(\'form'.($page+1).'\')" class="next-btn"/>
  </div>

最后一页有这个代码，而不是下一个按钮：

</div><input type="button" id="submit" value="Submit" class="submit-btn"/></form>

Answer 1

在我看来，隐藏其他选项并逐个打开是更好的方法（也称为多步表单）。

对于验证，您可以在客户端使用 javascript 或使用 ajax 来触发适当的事件（您不需要提交它进行验证）并在服务器端进行验证。

你在正确的轨道上。我在这里看到的问题是您将如何进行验证，但这取决于您的表单的结构。