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:

Answer 1

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.

Answer 2

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!

Answer 3

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

Answer 4

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
}