Javascript/ajaxまたはjqueryで複数のフォームを送信

これは私がやろうとしていること私は1つのページに3つのフォームがあるので、1つのフォームがモーダルダイアログで開いているので、単一のボタンでユーザーのクリックが、また、私はこれはまた、あなたのために働く必要がありJavascript/ajaxまたはjqueryで複数のフォームを送信

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script> 

var firstFormData = $("#form1").serialize(); 
var secondFormData = $("#form2").serialize(); 
var thirdFormData = $("#form3").serialize(); 


$.post(
    URL: test.php    
    firstFormData + secondFormData + thirdFormData 
); 
</script> 

<form id="form1"> 
<input type="text" name="one"></input> 
</form> 

<form id="form2"> 
<input type="text" name="two"></input> 
</form> 

<form id="form3"> 
<input type="text" name="three"></input> 
</form> 

<button>submit here</button> 
<?php 

echo $_POST['one']; 
echo $_POST['two']; 
echo $_POST['three']; 

?>

出典

2017-04-07 Otávio Barreto

まず、あなたが送信ボタンのonclickハンドラを追加する必要があります：それはここで

が働いjsFiddleです:-)だけですべての悪いスタイルです。次に、すべてのフォームのシリアル化結果を連結し、AJAXリクエストを作成するだけです。これは、通常のAJAXリクエストとカスタムデータの違いはありません。 – ghostprgmr

$ .postはデータパラメータを受け入れます。しかし、あなたはそれを構築することができます。 https://api.jquery.com/jQuery.post/ – mkaatman

問題は解決しましたか？もしそうなら、あなたは答えを受け入れることによってこの質問を閉じるべきです。 –

を付けることができ以下：

var combinedFormData = $("#form1,#form2,#form3").serialize();

これにより、3つのフォームすべてが1つのクエリ文字列にシリアル化されます。入力名が重複しないようにしてください。

完全な実装は次のようになります。

<?php 
     // PHP Code to return the HTML to be inserted in the #result div 
     // Just for demonstration purposes. 
     if (count($_POST) > 0) { 
      echo "<p>You successfully posted:</p><ul>"; 
      foreach ($_POST as $key => $val) { 
        echo "<li>$key: $val</li>"; 
      } 
      echo "</ul>"; 
      exit; 
     } 
?> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <form id="form1"> 
     <input type="text" name="one"> 
    </form> 

    <form id="form2"> 
     <input type="text" name="two"> 
    </form> 

    <form id="form3"> 
     <input type="text" name="three"> 
    </form> 

    <button id="sendforms">Submit forms</button> 

    <div id="result"></div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#sendforms").click(function() { 
        var combinedFormData = $("#form1,#form2,#form3").serialize(); 
       $.post(
         "test.php", 
         combinedFormData 
       ).done(function(data) { 
         alert("Successfully submitted!"); 
         $("#result").html(data); 
       }).fail(function() { 
          alert("Error submitting forms!"); 
       }) 
      }); 
     }); 
    </script> 
    </body> 
</html>

をPHPコードだけで、説明とテストのためであることに注意してください。このようにフォーム処理を実装したり、フォームのような同じファイルに入れたりしてはいけません。すべてのhttps://jsfiddle.net/kLa1pd6p/

出典

2017-04-07 19:50:35

これは問題ありませんが、PHP vars echo $ _POST ['one']; echo $ _POST ['two']; echo $ _POST ['three'];値は投稿されません同じtest.phpファイルを提出しています –

もちろん何も表示されません。そこに非同期$ .postを実行しています。つまり、ページが再ロードされることはないので、PHPスクリプトは（ブラウザ内で）再度実行されることはありません。リクエストはtest.phpの2番目のバージョンを呼び出しますが、ブラウザにその結果は表示されません。 –

ああ、PHPは他のページの右にする必要がありますか？ –

を提出する形で誤差関数EN成功事例ののAJAX実装希望フォーム：

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script> 
$("#sub").on("click mousedown touchstart", function(){ 
var firstFormData = $("#form1").serialize(); 
var secondFormData = $("#form2").serialize(); 
var thirdFormData = $("#form3").serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: 'test.php', 
     data: { 
       one: firstFormData, 
       two: secondFormData, 
       three: thirdFormData 
       }, 
     success: function(data) { 
      console.log(data); 
     } 
    }); 

});  

</script> 
<form id="form1"> 
    <input type="text" name="one"></input> 
</form> 

<form id="form2"> 
    <input type="text" name="two"></input> 
</form> 

<form id="form3"> 
    <input type="text" name="three"></input> 
</form> 

<button id="sub">submit here</button> 

<?php 

    echo $_POST['one']; 
    echo $_POST['two']; 
    echo $_POST['three']; 
?>

出典

2017-04-07 19:40:42

また、私は成功とエラーfuncitonの実装が必要 –

私は私のファイルがtest.phpであることをテストしました私は同じファイルに提出していますが、私はvarsを取得したときに、データは送信されません echo $ _POST ['one']; echo $ _POST ['two']; echo $ _POST ['three']; –

はあなたのほぼ完了しますあなたの実装で。フォームを連結するには、&を使用してください。

var firstFormData = $("#form1").serialize(); 
var secondFormData = $("#form2").serialize(); 
var thirdFormData = $("#form3").serialize(); 

$.post('test.php', firstFormData + "&" + secondFormData + "&" + thirdFormData) 
    .done(function(data) { 
     // success function 
    }).fail(function() { 
     // fail function 
    });

ボタンにイベントハンドラを追加するには、IDを追加ANイベントハンドラ

<button id="submit-btn">Submit</button>

とイベントハンドラあなたはまた、単に行うことができます

$('#submit-btn').on('click', function() { 
    // do the ajax call 
    var data = $('#form1,#form2,#form3'); 
    $.post('test.php', data).done(function(data) { 
     alert(data); 
    }); 
});

出典

2017-04-07 19:48:43 Philipp

ユーザーがボタンをクリックしたときにどのように呼び出すのですか？ –

ボタンにIDまたはクラスを与え、イベントハンドラを追加する - 例を追加すると – Philipp

なぜ2つの関数？このファイルはtest.phpです。コードが書き込まれているファイルと同じファイルにサブミットしていますが、まだ動作していません。 –

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#sendforms").click(function() { 
        var combinedFormData = $("#form1,#form2,#form3").serialize(); 
       $.post(
         "post.php", 
         combinedFormData 
       ).done(function(data) { 
         //alert("Successfully submitted!"); 
         $("#result").html(data); 
       }).fail(function() { 
          //alert("Error submitting forms!"); 
       }) 
      }); 
     }); 
    </script>

出典

2017-04-22 01:33:15 Developer

Javascript/ajaxまたはjqueryで複数のフォームを送信

答えて

関連する問題