0

私は4ステップのフォームを持っています.4ページのformstep1.php、formstep2.php、formstep3.phpのようにしました。これらのフォームは、データベースの異なるテーブルに属しています..

たとえば、次のようにしたい。最初のフォームを送信すると、現在のページは更新されませんが、div コンテンツを変更し、画像を読み込んで 2 番目のフォームを呼び出します。

最初のフォームの投稿が成功した場合 { div に画像をロードして 2 番目のフォームを呼び出す }

2 番目のフォームの投稿が成功した場合 { div に画像をロードして 3 番目のフォームを呼び出す }

どうすればいいですか？最善のアプローチは何ですか？私の英語で申し訳ありません、そしてあなたの助けに感謝します

4

2 に答える 2

2

複数のフォームを用意するのではなく、すべての入力フィールドが含まれる 1 つのフォームを用意します。現在のステップに応じて、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を非表示にします。

Jクエリ：

ステップに応じて、特別なクラスを div に追加して、特定の div が非表示になるようにします。

検証が必要な場合は、jquery を使用して実行できます。

PHP レベルでは、必要に応じてさまざまなテーブルにデータを挿入できます。

ページを何度も更新するのではなく、フォームを 1 回投稿するだけで十分です。

于 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 に答える