使用 PHP 和 Javascript 进行多步发布？答案

【问题标题】：Multi-Step Post with Php and Javascript?使用 PHP 和 Javascript 进行多步发布？
【发布时间】：2013-01-31 18:04:40
【问题描述】：

我有一个 4 步表单，我把它做成了 4 页 formstep1.php 、 formstep2.php 、 formstep3.php 。这些表单属于数据库上的不同表..

我想让它像例如;当我提交第一个表单时，当前页面不应该刷新，而是更改 div 内容并使用加载图像调用第二个表单.. 我的意思是

如果第一个表单发布成功{ 调用第二个表单，将图像加载到 div 中。 }

如果第二个表单发布成功{ 调用第三种形式，将图像加载到 div 中。 }

我应该怎么做？什么是最好的方法？对不起我的英语，谢谢你的帮助

【问题讨论】：

标签： php jquery multi-step

【解决方案1】：

与其拥有多个表单，不如拥有一个包含所有输入字段的表单。根据您所处的步骤，使用 CSS 隐藏 div 以显示特定 setp 的相关输入。在最后一步提交表单。

EG：

div 1 - > step 1 - > contains input 1,2,3
div 2 - > step 2 - > contains input 4,5,6
div 3 - > step 3 - > contains input 7,8,9
div 4 - > step 4 - > contains input 10,11,12 -> submit the form

当您在第 1 步时，显示 div 1 并隐藏所有其他 div。同样，您可以继续。

CSS：

display : none; 隐藏 div。

查询：

根据步骤将特殊类添加到 div，因此特定的 div 将被隐藏。

如果您需要验证，可以使用 jquery 来完成。

在 PHP 级别，您可以根据需要将数据插入到不同的表中。

最好有一个表单发布而不是多次刷新页面。

【讨论】：

这可能不理想的原因之一是您可能出于放弃的原因想要存储数据。假设他们想在填写表格之前了解有关产品的更多信息。如果他们离开第 2 步，他们将不得不重新输入所有数据。

【解决方案2】：

为什么不试试 AjaxForms :- http://jquery.malsup.com/form/

 <html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
 <script type="text/javascript">
 $(document).ready(function() { 
      $("#form2").fadeOut('slow',function(){
      $("#form2").css({"visibility":"hidden"});
      });
      $("#form3").fadeOut('slow',function(){
      $("#form3").css({"visibility":"hidden"});
      });
      $("#form4").fadeOut('slow',function(){
      $("#form4").css({"visibility":"hidden"});
      });

                  // bind 'myForm1' and provide a simple callback function 
        $('#myForm1').ajaxForm(function() { 
            $("#form1").fadeOut('slow',function(){
             $("#form2").fadeIn('slow',function(){
             $("#form1").css({"visibility":"hidden"});
             $("#form2").css({"visibility":"visible"});
             });
           });
            }); 

   $('#myForm2').ajaxForm(function() { 
            $("#form2").fadeOut('slow',function(){
              $("#form3").fadeIn('slow',function(){
             $("#form2").css({"visibility":"hidden"});
             $("#form3").css({"visibility":"visible"});
             });
           });
            }); 

  }); 
</script>
</head>
<body>
<div id="form1">
<form id="myForm1" action="formstep1.php" method="post"> 
Name: <input type="text" name="name" /> 
Comment: <textarea name="comment"></textarea> 
<input type="submit" value="Submit Comment" /> 
</form>
</div>
<div id="form2">
<form id="myForm2" action="formstep2.php" method="post"> 
Likes: <input type="text" name="name" /> 
Adress: <textarea name="comment"></textarea> 
<input type="submit" value="Submit Data" /> 
</form>
</div>
</body>
</html>

我认为它对你有用...

【讨论】：