用一个按钮提交多个表单

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页

客户评论订购细节和具有添加的选项更多产品。客户返回page1订购另一个。所有客户的订单将以各自的形式显示在第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 

我要的是一个按钮，将所有订单添加到贝宝购物车。当然，他们可以通过单击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> 

下面是一个使用PHP脚本生成动态表单$_SESSION：

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

所以问题是，如何用一个按钮提交所有表格？

Answer 1

这里是一个工作的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 2

你试过用$就做呢？您可以添加一个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 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调用后success.also不要忘记登录到控制台提交。

此代码在完成所有ajax后弹出和关闭弹出窗口中工作。