web-dev-qa-db-ja.com

1つのボタンで複数のフォームを送信

$_SESSIONを使用して、Webストアのフォームを動的に作成しています。これらのフォームには、顧客が必要とする製品のカスタム情報が含まれています。これはレイアウトです：

Page1

お客様は、次のようなフォームに記入します。

<form action="page2" method="post">
<input type="text" name="size">
<input type="text" name="color">
<input type="submit" name="submit" value="Review Order">
</form>

ページ2

顧客は注文の詳細を確認し、さらに製品を追加するオプションがあります。お客様はページ1に戻って別のページを注文します。顧客の注文はすべて、それぞれのフォームで2ページ目に表示されます。

このように見えます：

Size: 1
Color: blue
Click Here To Checkout

Size: 2
Color:green
Click Here To Checkout

Size:3
color:red
Click Here To Checkout

私が欲しいのは、Paypalカートにすべての注文を追加する1つのボタンです。確かに、Click Here To Checkoutをクリックしてすべての注文を個別に追加できますが、複数の商品を追加するには大きなループを通過する必要があります。

顧客ができるだけ多くの商品を追加してから、すべての注文をショッピングカートに追加するボタンを1つクリックできるようにしたいと思います。

これは私が試したものですが、明らかに機能しませんでした：

<script>
$(document).ready(function(){
$('#clickAll').on('click', function() {
    $('input[type="submit"]').trigger('click');
    });
    });
    </script>

    <form action="" method="post">
    <input type="text" name="name">
    <input type="submit" name="submit" value="submit">
    </form>

    <form action="" method="post">
    <input type="text" name="name">
    <input type="submit" name="submit" value="submit">
    </form>

    <form action="" method="post">
    <input type="text" name="name">
    <input type="submit" name="submit" value="submit">
    </form>

    <button id="clickAll">Submit All</button>

これは、$_SESSIONを使用して動的フォームを生成するphpスクリプトです：

<?php

if(isset($_POST['submit'])) :

$test = array(
    'size' => $_POST['size'],
    'color' => $_POST['color'],
    'submit' => $_POST['submit']
);

$_SESSION['testing'][] = $test;

endif;


if(isset($_SESSION['testing'])) : 

foreach($_SESSION['testing'] as $sav) {

?>

<form action="Paypal.com/..." method="post">
<input type="text" name="size" value="<?php echo $sav['size']; ?>">
<input type="text" name="color" value="<?php echo $sav['color']; ?>">
<input type="submit" name="submit" value="Click Here to Checkout">
</form>

<?php } endif; ?>

問題は、1つのボタンですべてのフォームを送信するにはどうすればよいですか？

phpjquerysessionpaypalshopping-cart
5
Josan Iracheta

$ .ajaxでそれをやろうとしましたか？ Foreachを追加するか、Onsucces関数で別のフォームを呼び出すことができます。別のアプローチは、正しい「抽象的な」フォームを指す配列を使用して、すべてを1つのフォームに変更することです。

<form action="" method="post">
    <input type="text" name="name[]">
    <input type="text" name="example[]">

    <input type="text" name="name[]">
    <input type="text" name="example[]">

    <input type="text" name="name[]">
    <input type="text" name="example[]">

    <button id="clickAll">Submit All</button>
</form>

そしてphpで：

foreach ($_POST['name'] as $key => $value) {
    $_POST['name'][$key]; // make something with it
    $_POST['example'][$key];  // it will get the same index $key
}
2
sagits

最初にループを作成して、すべてのフォームIDを取得し、それらをajaxに送信します。

<script name="ajax fonksiyonları" type="text/javascript">
            function validate(form){
            //get form id
            var  formID = form.id;
            var formDetails = $('#'+formID);
                $.ajax({
                    type: "POST",
                    url: 'ajax.php',
                    data: formDetails.serialize(),
                    success: function (data) {  
                        // log result
                        console.log(data);
                        //for closing popup
                          location.reload();
                        window.close()
                    },
                    error: function(jqXHR, text, error){
                    // Displaying if there are any errors
                    console.log(error);
                    }
                });
            return false;
        }
            //this function will create loop for all forms in page
            function submitAll(){
                    for(var i=0, n=document.forms.length; i<n; i++){
                        validate(document.forms[i]);
                    }
                }

順番に送信するためのボタンを作成する

<a class="btn" id="btn" onclick="submitAll();" href="">Save &amp; Close</a>

成功したらajax呼び出しを停止します。コンソールにログインすることも忘れないでください。

このコードは、すべてのajaxが完了した後、ポップアップとクローズポップアップで機能します。

0
drascom

FWIW、私はiframeを作成してこれを行い、2番目のフォームのターゲットを作成して、このように両方を送信します

//create the iframe
$('<iframe id="phantom" name="phantom">').appendTo('#yourContainer');

次のようにデュアルサブミットを作成します。

function dualSubmit() {
    document.secondForm.target = 'phantom';
    document.secondForm.submit();
    document.firstForm.submit();
}

動作します！

0
Dirty Bird Design

動作するjsFiddleは次のとおりです：http://jsfiddle.net/SqF6Z/3/

基本的に、各classとtrigger()にformを追加してそのclassに送信します。そのようです：

HTML（例のみ）：

<form action="http://www.google.com" method="get" class="myForms" id="1stform">
    <input type="text" value="1st Form" name="q1" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="2ndform">
    <input type="text" value="2nd Form" name="q2" />
</form>
<form action="http://www.google.com" method="get" class="myForms" id="3rdform">
    <input type="text" value="3rd Form" name="q3" />
</form>
<input type="button" id="clickMe" value="Submit ALL" />

jQuery：

$('.myForms').submit(function () {
    console.log("");
    return true;
})

$("#clickMe").click(function () {
    $(".myForms").trigger('submit'); // should show 3 alerts (one for each form submission)
});
0
FastTrack