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触发相应的事件（您不需要提交它以进行验证）并在服务器端验证。

你走得很好。我在这里看到的问题是您如何进行验证，但这取决于您的表单的结构。

多页表单的策略？

1 个答案: