Submit Multiple Forms With One Button
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
}
Josan Iracheta
Javascript web developer. Current stack: Node.js, Express, React, MySQL
Updated on July 31, 2022Comments
-
Josan Iracheta over 1 year
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?
-
mplungjan over 10 yearsthe first submit will be interrupted by the second amd so on. Remove the alert and the script fails
-
Josan Iracheta over 10 years@FastTrack is there a way to implement this without the alert?
-
FastTrack over 10 years@JosanIracheta just replace the
alert
with aconsole.log("");
call. See my updated answer -
ʰᵈˑ over 10 yearsPerhaps adopt
each
to loop through if @mplungjan is correct? -
mplungjan over 10 yearsIf 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
-
FastTrack over 10 years@mplungjan why don't you give it a stab?
-
mplungjan over 10 yearsBecause 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
-
Mai about 9 yearsHow 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.