Getting values from external input fields generated by jQuery

Question

I will try to explain the situation as it is a little bit more complicated.

I have created a multiple picture upload form. It works like this:

• In the form there are 2 submit buttons. 1 normal HTML submit button and another one is generated by jQuery. It is a "Browse" button which allows you to browse pictures on your HDD and add them to a collection. This is all happening without you actually submitting the form. Pictures are saved via ajax to a temporary table. I am using this plugin for this: http://www.uploadify.com/
• I use jQuery to fetch the temporary pictures and display them above the normal submit button so users can see a complete set of pictures they are going to upload before actually submitting the form.
• The way I do it is that I have a page which displays temporary pictures and I am useing jQuery get() method to fetch this page and display it in the form.

Now the important part, under every temporary picture there is a text input field so users can enter titles for all pictures they are going to submit.

However, when users hit the form submit button, the text input fields are not submitted because they are just fetched with ajax from a different page.

How can I get to these text fields?

EDIT:

Inside the form I have an empty div:

<div id="temporaryPhotos"></div>

And this is where I am putting all pictures (img tags) and text fields generated with jQuery (which are from a different page on the same website);

Answer 1

If the form's HTML isn't borked, this should work. One solution though is to create a hidden input field in your original form, collect all generated text input fields's values in an array, and put that array in the hidden input field on submit.

Check out serializing with JSON for more info on this.