Cloning or adding an input to a form in jQuery does not submit to PHP in Firefox

Question

$('#images_upload_add').click(function(){
   $('.images_upload:last').after($('.images_upload:last').clone().find('input[type=file]').val('').end());        
});

using this code to append file input's does not upload the file in firefox.

also

$('#image_server_add input[type=button]').click(function(){
    var select = $(this).siblings('select').find(':selected');
    if(select.val()){
        $('#image_server_add').before('<tr class="images_selection"><td><input type="button" value="Delete"></td><td class="main">'+select.html()+'<input type="hidden" value="'+select.html()+'" name="images_server[]"/></td></tr>');
    }
})

also does not upload the values to the $_POST

I can't find anything to say why this wouldn't work in the documentation, this works in IE but not it Firefox/WebKit

Why wouldn't these examples correctly upload the form values?

Answer 1

Wow! Sometimes jQuery can actually be too dense to read. Would also help if we could see your markup.
Stab in the dark here because I'm guessing at what you're trying to do.

You can't programmatically enter a filename into a file field and it be uploaded to the server. That would be dangerous.

Perhaps I'm barking up the wrong tree?

Answer 2

Are you having the same problem if you create a new input rather than cloning an existing one?

Are you changing the name of the cloned input to avoid name collisions or are you using an array style name (e.g. file[])?

What is the purpose of adding the markup of the selected option to a hidden input?

For fun, have you tried using .clone(true)?

Answer 3

Maybe rather than adding the element just as the form is submitted, put the element in, but with default values.

Then when the button is clicked, populate that element with the right value.

I just say that because by the time you click on the submit, it might be too late for the added element to be submitted along with the form.

Answer 4

Bottom line the markup on the page was mangled.

The form was in a table based layout, not by my choice, and the form declaration was inside a tr.

I moved the form declaration to a parent td of the form inputs and now it works.

This is an interesting result considering the rendering engine will correctly submit inputs that are improperly placed, but attempting to add those inputs using jQuery/javascript? into the same place will not work in Firefox/WebKit.

I imagine this has to do with the dom manipulation that javascript does and how it may be more strict about the block level element requirements.

Any more notes/conjectures about my findings would be appreciated.

Answer 5

I got to this section from google searching a similar problem.

To me, I was able to fix it by taking a step back at the problem -

in a example form:

    <table>
<form method="post">
<tr>some content <input type="text" name="test"> </tr>
</form>
</table>

This will work in Internet explorer for some reason, but it is actually invalid html. Move the form tags to outside the table, like so:

<form method="post">
    <table>
<tr>some content <input type="text" name="test"> </tr>
</table> 
</form>

And it will then work.

The input's will work fine (even dynamicly) this way, I was having a lot of trouble where a form would work, until you inserted more inputs or form elements - only the original elements would submit, which was very hard to track.

Answer 6

God bless you all for any answer in this thred. It solved my problem. :-)