Submit Multiple Forms With One Button

Question

I am using $_SESSION to dynamically create forms for my web store. These forms hold the custom info for the product that the customer wants. This is the layout:

Page1

Customer fills out form that looks something like this:

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

Page2

Customer reviews order details and has the option of adding more products. Customer goes back to page1 to order another one. All of the customer's orders will show on page2 in their respective form.

Looks like this:

Size: 1
Color: blue
Click Here To Checkout

Size: 2
Color:green
Click Here To Checkout

Size:3
color:red
Click Here To Checkout

What I want is one button that will add ALL orders to the PayPal cart. Sure they can add every order individually by clicking on Click Here To Checkout, but then they will have to go through a big loop to add multiple products.

I want the customer to be able to add as many products as possible and then click one button that adds all of the orders to the shopping cart.

This is what I tried but it obviously didn't work:

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

Here is the php script that generates the dynamic forms using $_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; ?>

So the question is, how can I submit all of the forms with ONE button?

Lustful

Only if you have a different target for each form. Also very poor practice to call anything name=submit. In your code you have many submit buttons but only one form. That does not look like what you are asking – Lundy

possible duplicate of multiple items in paypal – Lundy

I copied and pasted what I tried that's why you saw one form. I tried putting all of the inputs and submit buttons into one form and clicking all of them with one button but that didn't work either. – Lustful

That answer won't work for me because these forms are dynamic. – Lustful

@JosanIracheta check my answer below... it will work for dynamic forms. It just requires that each form have the same class. – Ballad

Answer 1

Have you tried to do it with $.ajax? You can add an foreach, or call another form on the Onsucces function. Another approach is changing all to one form with an array that points to the right "abstract" form:

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

And in php:

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

Clavichord

Answer 2

Here is a working jsFiddle: http://jsfiddle.net/SqF6Z/3/

Basically, add a class to each form and trigger() a submit on that class. Like so:

HTML (example only):

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

Ballad

the first submit will be interrupted by the second amd so on. Remove the alert and the script fails – Lundy

@Ballad is there a way to implement this without the alert? – Lustful

@JosanIracheta just replace the alert with a console.log(""); call. See my updated answer – Ballad

Perhaps adopt each to loop through if @Lundy is correct? – Phobe

If there is no separate target to each form, the second submit will kill the first and so on. The better method is to ajax if possible and have the next submit in the success of the first – Lundy

@Lundy why don't you give it a stab? – Ballad

Because I believe it is the wrong approach. Paypal has an API used all over the world and what OP is trying to do is fairly normal so I think another approach is necessary – Lundy

How can I do this with passing values with POST or GET? If I have two separate forms and each have an inputs fields to be submitted, I got an 'undefined index' error (located at the form outside the submit button I clicked) after submitting my form. – Noam

Answer 3

FWIW, I do this by creating an iframe, making that the target for the second form then submit both like this

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

and create the dual submit like this:

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

works!

Brubaker

Answer 4

first create loop get all forms id and send them to 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]);
                    }
                }

create button for submit in order

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

then stop ajax call after success.also dont forget to log to console.

this code works in popup and closing popup after all ajax completed.

Gladiolus