Submitting multiple HTML forms + other variable data with AJAX .on(click) method

Question

I suppose really this is a continuation of my last question titled " Submit multiple HTML forms with a single submit button via AJAX " which got me started with some very basic AJAX. You really have to read that question to understand this one thoroughly. The key to this question now is other variable data ...

So, I have a basic AJAX submit script running with jQuery, it's a duplicate to the answer on my previous question (minus a change from 'button' to 'input#publishimages'), and it works well at iterating through multiple forms and submitting them all:

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

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

The form which is being submitted (each form is equal to one image, so iterate over as many times as needed to submit each image - see more is my previous question) is also in the previous question, and looks similar to 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>

Well in retrospect, sadly that was a bit too watered down; and this is where the other variable data bit comes into play. I'm now examining each image's EXIF data for additional information, and removing inputs from the form if I find data which would otherwise have to be filled out by the user on the form, if not , display the input so the user can fill it out themselves. So the PHP script with the form in it looks a bit more like this (pseudcode):

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

   // Examine EXIF Data

   if (I find EXIF Location Data) {

       $_POST['image'][$i]['location'] = $location;

   } else {

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

   }

  // etc, etc, similar situation occurs with camera make + model, date taken etc.

</form>

So what you can see I'm doing is selectively removing and adding inputs to a form dynamically if I find/do not find information. If I find it, submit the information to the $_POST superglobal, else just echo out a input in the form for the user to fill out. What's the problem? The Javascript.

This is a problem because...

Now, when I reference $(this) (referring of course to the $('form') ), only some variables (depending how much EXIF data I managed to extract) are sent via AJAX to their destination, because they're no longer part of the form and the input doesn't exist - instead I've assigned them to the $_POST superglobal and they've become inaccessible to my jquery script.

So...

I need a way of being able to submit EVERYTHING pertaining to the image via AJAX to my destination, no matter whether it was POSTED or submitted as part of the form. I'm totally at a loss on how to achieve this... any suggestions?

Answer 1

You could just keep inputs for everything. For those that have existing data in EXIF, simply fill it in and hide the inputs from user with CSS. This way, you can handle the forms in a more generic fashion and your problem is gone.

Answer 2

You're 'double submitting'. Inside your AJAX function intercept the click and prevent the default:

$('input#publishimages').on('click', function (e) {
    e.preventDefault();
    $('form').each(function () {
        post_form_data($(this).serialize());
    });
});

This will stop the form from submitting. A submitted form is nothing but a POST or GET request anyways.

Other than that I'm confused as to what you're trying to accomplish. It sounds like the data is incomplete because of a validation step? User submits form, some EXIF data is grabbed, and new inputs are returned with the missing data, but then the EXIF data has dissolved in a puff of zeros and ones, right? If that's the case you could use hidden form fields:

if (I find EXIF Location Data) {

    $_POST['image'][$i]['location'] = $location;
    echo '<input type="hidden" value="$foo" name="$bar" />;

} else {

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

}