ajaxForm отправляет пустой POST при отправке из динамически созданной формы

Отправка файла с помощью 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;
}

person HeyWatchThis    schedule 04.12.2013    source источник
comment
Когда форма создается динамически, срабатывает ли вообще при отправке кода в jQuery("#file_upload_form").on("submit"...?   -  person Hrvoje Golcic    schedule 04.12.2013
comment
Не существует такой функции, как build_file_upload_form. И я не уверен, что вы можете загружать такие файлы.   -  person Poetro    schedule 04.12.2013
comment
Рефакторинг опечаток.Исправлено.   -  person HeyWatchThis    schedule 04.12.2013
comment
@hRvoed Да, в обоих случаях срабатывает .on('submit'.... (И мой сервер получает запрос в обоих случаях. Но в последнем случае содержимое POST пусто.)   -  person HeyWatchThis    schedule 04.12.2013
comment
Я надеялся не слишком усложнять серверный код, так как он не меняется, но если хотите, я уточню это.   -  person HeyWatchThis    schedule 04.12.2013
comment
Я знаю, что сервер получает запрос, но мне было интересно, срабатывает ли это e.preventDefault();. Если так... это действительно странно, потому что я не вижу разницы   -  person Hrvoje Golcic    schedule 04.12.2013
comment
Хорошо, $_POST пуст, это нормально, а как насчет $_FILES? Это должно быть там   -  person Hrvoje Golcic    schedule 04.12.2013


Ответы (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. Это из здесь - stackoverflow

person Hrvoje Golcic    schedule 04.12.2013