ajaxForm is sending empty POST when submit from dynamically built form

Question

Submitting a file with ajaxSubmit() works fine when the form is hard-coded. But the data received by the server is empty when the form is created dynamically.

This version works

HTML

<form id='file_upload_form' method="POST" enctype="multipart/form-data" action="/upload">
<input type="file" id='myfile' name="myfile" />
<br/>
<input type="submit" />
</form>

<div id='status'> </div>

JavaScript

jQuery(document).ready(function() {
    jQuery("#file_upload_form").on("submit", function(e) {
        e.preventDefault();

        jQuery(this).ajaxSubmit({
            target: '#status'
        });
    });
});

Debuggin in .on("submit"... , jQuery(this).formSerialize() yields "myfile=%5Bobject+File%5D"

But this version using a dynamically created form sends empty data

HTML

<div id='parent_elem_div'> </div>
<div id='status'> </div>

JavaScript

jQuery(document).ready(function() {
    var parent_elem = jQuery('#parent_elem_div');

    var new_form_elem = build_form();
    parent_elem.append(new_form_elem);
});

jQuery(document).ready(function() {
    jQuery("#file_upload_form").on("submit", function(e) {
        e.preventDefault();

        jQuery(this).ajaxSubmit({
            target: '#status'
        });
    });
});

But here, debuggin in .on("submit"... , jQuery(this).formSerialize() yields "".

This function builds the form...

//
function build_form (){
    var new_inner_div_elem = document.createElement('div');
    new_inner_div_elem.id = 'parent_elem_div';

    var upload_form = document.createElement('form');
    upload_form.id = 'file_upload_form';
    upload_form.action = '/upload';
    upload_form.method = 'POST';
    upload_form.enctype="multipart/form-data";

    var file_input = document.createElement('input');
    file_input.type = 'file';
    file_input.id = 'file_upload_input';

    var file_upload_submit = document.createElement('input');
    file_upload_submit.type = 'submit'; 

    upload_form.appendChild(file_input);
    upload_form.appendChild(file_upload_submit);

    new_inner_div_elem.appendChild(upload_form);
    return new_inner_div_elem;
}

Answer 1

Aha! Here it go, in your code:

var file_input = document.createElement('input');
file_input.type = 'file';
file_input.id = 'file_upload_input';

This is missing:

file_input.attr('name', 'myfile');

This is the only part that your HTML form has, and dynamical doesn't, so I guess that's the trick

If an HTML doesn't have a name it won't be passed to the querystring or the POST data - there will be no way to retrieve it from PHP This is from here - stackoverflow