从动态构建的表单提交时，ajaxForm 正在发送空 POST答案

【问题标题】：ajaxForm is sending empty POST when submit from dynamically built form从动态构建的表单提交时，ajaxForm 正在发送空 POST
【发布时间】：2013-12-04 15:39:12
【问题描述】：

当表单是硬编码时，使用ajaxSubmit() 提交文件可以正常工作。但是动态创建表单时服务器接收到的数据是空的。

此版本有效

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'
        });
    });
});

.on("submit"... 中的调试，jQuery(this).formSerialize() 产生 "myfile=%5Bobject+File%5D"

但是这个版本使用动态创建的表单发送空数据

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'
        });
    });
});

但是在这里，在 .on("submit"... 中调试，jQuery(this).formSerialize() 产生 ""。

这个函数构建表单...

//
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;
}

【问题讨论】：

动态创建表单时，在jQuery("#file_upload_form").on("submit"... 中提交代码是否会触发？
没有定义build_file_upload_form这样的函数。我不确定，你可以上传这样的文件。
重构错字。已修复。
@hRvoed 在这两种情况下都是，.on('submit'... 触发器。（并且我的服务器在这两种情况下都收到了一个请求。但在后者中，POST 内容是空的。）
我希望不要让服务器代码过于复杂，因为它不会改变，但如果你愿意，我会澄清这一点。

标签： javascript jquery forms post ajaxform

【解决方案1】：

啊哈！在这里，在您的代码中：

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

这个不见了：

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

这是您的 HTML 表单仅有的部分，而动态的则没有，所以我想这就是诀窍

如果 HTML 没有名称，则不会将其传递给查询字符串或 POST 数据 - 将无法检索它来自 PHP 这是来自here - stackoverflow

【讨论】：