0

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

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

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

如果第二个表单发布成功{调用第三个表单并将图像加载到 div..}

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

4

2 回答 2

2

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

例如：

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 级别，您可以根据需要将数据插入到不同的表中。

拥有一个表单帖子而不是多次刷新页面会非常好。

于 2013-01-31T18:07:36.920 回答
1

为什么不尝试 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>

我觉得对你有用...

于 2013-01-31T18:19:11.660 回答