Submit multiple forms by single button

Question

I have this php code in my HTML file. I need to update the table of the database using these forms.

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {

    echo '<img class="plan1" id="'.$row["imageID"].'" style="position:absolute; top:'.$row["top"].'px; left:'.$row["left"].'px;" src="'.$row["url"].'" width="'.$row["width"].'" height="'.$row["height"].'" />';

    echo '<form action="saveimage3.php" method="post" id="form1">';
    echo '<input type="hidden" name="planid" value="'.$row["planID"].'"/>';
    echo '<input type="hidden" name="version" value="1'.$row["version"].'"/>';
    echo '<input type="hidden" name="imageid" value="'.$row["imageID"].'"/>';
    echo '<input type="hidden" name="url" value="'.$row["url"].'"/>';

    echo '<input type="hidden" name="left" id="l'.$row["imageID"].'" value="'.$row["left"].'"/>';
    echo '<input type="hidden" name="top" id="t'.$row["imageID"].'" value="'.$row["top"].'"/>';
    echo '<input type="hidden" name="width" id="w'.$row["imageID"].'" value="'.$row["width"].'"/>';
    echo '<input type="hidden" name="height" id="h'.$row["imageID"].'" value="'.$row["height"].'"/>';
    echo '</form>';
}
}

This will create multiple forms according to the data coming from the database.

I have this ajax code to submit all the forms to the php file

<script>
        function validate(form){
        //get form id
        var  formID = form.id;
        var formDetails = $('#'+formID);
            $.ajax({
                type: "POST",
                url: 'saveimage3.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]);
                }
            }
</script>

And I have this button

<button onclick="submitAll()">Save Version</button>

By submitting with these, the database is updating only for the first form data. Other forms are not sending data to the php file. How can I get all the forms into the php file???

Answer 1

maybe its because location.reload();
you are getting answer from first forms handler and page reloads and breaks validate loop and so other forms dotn get posted?
AND - You need to change forms id`s to be unique!

Answer 2

Javascript. Create a hidden submit field in each form, and then when your actual submit button is clicked, make it trigger an event which asks the browser to act as if all submit buttons have been clicked.

I would use the JQuery .trigger() event for that purpose. http://api.jquery.com/trigger/

So, if you have an actual submit button with id "submit-all" and hidden submit buttons with class "submit-button" you could use the following JQuery:

$(document).ready(function() {

    $('#submit-all').click(function(){

        $('.submit-button').trigger("click");

    });
});

Answer 3

Instead of

var formDetails = $('#'+formID);

Try

var formDetails = $(form);

I don't know if it will be enough to fix your bug. Just try it.

You already have your form in your argument. Just wrap it inside a jQuery collection like I did.

Also, give different ids to all your forms, just in case.

Answer 4

I solved it. The problem occurred because the every form has the same id. By an incremental variable I made changes in the form id to vary from one to one. Then problem solved. thank you very much everyone who tried to help me..!

Answer 5

In your while loop, every form has the same id="form1" . That is not only invalid HTML but also leads to your issue of only submitting one form. Increase the form ID and then simply do in JS:

$('#submitAll').click(function(){
    $('[id*="form"]').submit();
});