Question

我有一个4步形式，我把它变成4页formstep1.php，formstep2.php，formstep3.php。这些表单属于数据库中的不同表。

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

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

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

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

Answer 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。

Jquery：

取决于步骤将特殊类添加到div中，因此特定的div将被隐藏。

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

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

拥有一个表单帖子而不是多次刷新页面真的很不错。

Answer 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>

我认为这对你有用......

使用Php和Javascript的多步帖？

2 个答案: