Question

我正在使用$_SESSION为我的网上商店动态创建表单。这些表单包含客户想要的产品的自定义信息。这是布局：

第1页

客户填写的内容如下所示：

<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购物车的按钮。当然，他们可以通过点击Click Here To Checkout单独添加每个订单，但是他们将不得不经历一个大循环来添加多个产品。

我希望客户能够添加尽可能多的产品，然后点击一个按钮将所有订单添加到购物车。

这是我尝试的但显然无效：

<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; ?>

所以问题是，如何使用ONE按钮提交所有表单？

Answer 1

您是否曾尝试使用$ .ajax进行此操作？您可以添加foreach，或在Onsucces函数上调用另一个表单。另一种方法是使用指向正确“抽象”形式的数组将所有形式更改为一个形式：

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

Answer 2

这是一个有效的jsFiddle： http://jsfiddle.net/SqF6Z/3/

基本上，在class上为每个form和trigger()提交一个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)
});

Answer 3

FWIW，我这样做是通过创建一个iframe，使得第二个表单的目标然后像这样提交

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

并创建双向提交，如下所示：

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

作品！

Answer 4

首先创建循环获取所有表单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完成后，此代码在弹出窗口和关闭弹出窗口中起作用。

使用一个按钮提交多个表单

4 个答案: