Submit multiple HTML forms with a single submit button via AJAX

Question

I've got a page called publish.php which allows a user to enter details of each image (name, description, location , etc) they've just uploaded on the previous page, with each image having its own form to enter this information. Not all forms are displayed at once, rather, all the images are displayed as thumbnails at the top of the page, and clicking on an image hides the previous image's form and shows the current image's form, so it's similar to a tabbed layout.

What I want to do is submit all these forms via a single submit button which is isolated from every form and located in a separate area of the publish.php page - if there's any errors, I'd also like to echo them out. My brief research indicates that this is not possible with HTML alone and AJAX will be required.

Here's a distilled version of what the PHP code looks like to display each image and form:

// Display each image
$i = 0;
foreach ($images as $image) {
   echo '<img src="imageSrc'.$i.'" />';
   $i++;
}

// Further down the page... display each form...
$i = 0;
foreach ($images as $image) {
    include 'publishform.php';
    $i++;
}

publishform.php looks a bit like this:

<form id="image<?php echo $i; ?>">
   <label>Name</label>
   <input name="image[<?php echo $i; ?>][Name]" />

   <label>Location</label>
   <input name="image[<?php echo $i; ?>][Location]" />

   <!-- etc, etc, for description, coordinates, camera etc -->

</form>

So basically, each image is linked to each form by the variable $i which increments as necessary until the end of the $images array is reached. In the top right corner of my page, I've placed a submit button which I want to submit all these forms if there's no errors, and if there are, simply echo them out without submitting.

How would I go about accomplishing this?

pdoherty926 · Accepted Answer · 2013-03-02 21:51:44Z

4

What about something like this?

function post_form_data(data) {
    $.ajax({
        type: 'POST',
        url: 'somewhere',
        data: data,
        success: function () {},
        error: function () {}
    });
}

$('button').on('click', function () {
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});

http://jsfiddle.net/MxHQe/

answered Mar 2, 2013 at 21:51

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

marked-down Over a year ago

Thanks! Could you summarize the difference between your answer and ThinkingStiff's answer? Which one is better? How can echo through errors with this?

marked-down Over a year ago

@ethagnawl, I haven't tried it yet. I have to read up more on AJAX first... but if I can get it working I'll give you the green tick... thanks!

Collectives™ on Stack Overflow

Submit multiple HTML forms with a single submit button via AJAX

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related