Question

I have several divs that are generated dynamically after a file is uploaded. Each file upload creates a div in this format:

<div id="uploadifive-fileupload-queue" class="uploadifive-queue">
    <div class="uploadifive-queue-item complete" id="uploadifive-fileupload-file-0">

        <div class="inputs">

            <input type="hidden" name="image_id" value="0">
            <input type="text" name="alt-text">
            <input type="submit" name="image_data_submit" value="Submit" />

        </div>
    </div>
</div>

Every item uploaded increments the id of the uploadifive-queue-item class to uploadifive-fileupload-file-0, uploadifive-fileupload-file-1, uploadifive-fileupload-file-2, etc.

I dynamically fill the hidden image_id from the response, so each hidden image_id field will have a different numerical value corresponding to the image_id I have stored in the database. This looks like:

'onUploadComplete'  : function(file, data) {    
     $('input[name=image_id]:last').val(data);
}

I am trying to fill out the alt-text input field with some text and then when clicking on the Submit button, it sends the command via ajax to the database where it updates the alt-text field in the database where the image_id matches.

The problem is I can’t figure out how to make the Submit button only submit the image_id and alt-text that is in the same div container. Each div has a unique ID with an incremented number, but I’m not sure how to select that. How can I do it?

Basically, if the button in uploadifive-fileupload-file-3 is submitted, I only want the image_id field from uploadifive-fileupload-file-3 to be submitted via ajax.

Here’s how I have the jQuery ajax currently:

$("button[name=image_data_submit]").click(function(){
        $.ajax({
            url: './update_image/',
            type: "POST",
            data: { 
                image_id: $("input[name=image_id]").val(), 
                alt_text: $("input[name=alt_texted]").val() 
            },
            success: function(response){
                console.log(response);
            }
        });
    });

I’d appreciate any help. Been stuck on this all day :/

Answer 1

How your code is right now it should be like this

EDITED :

You don’t really need to know which div you’re in. You just need the input values by your submit button. Also you you are selecting input with "input[name=alt_texted]" which is wrong. It should be input[name=alt-text]

$("input[name=image_data_submit]").click(function(){
    $.ajax({
        url: './update_image/',
        type: "POST",
        data: { 
            image_id: $(this).siblings("input[name=image_id]").val(), //<-- this = current element. then find sibling inputs
            alt_text: $(this).siblings("input[name=alt-text]").val() // <-- your alt_texted didn't match your html
        },
        success: function(response){
            console.log(response);
        }
    });
});

http://jsfiddle.net/utJKU/7/