JQuery Ajax Form и динамически созданные элементы формы, не отправляющие

Я пишу форму, в которой некоторые элементы ввода текста загружаются динамически при изменении списка выбора.

Проблема в том, что когда я отправляю форму, эти элементы не отправляются в данных, которые публикуются на сервере.

Что мне нужно сделать, чтобы эти динамически созданные элементы "вошли" в форму для отправки?

Код выглядит примерно так:

$("#my_select_id").change(function() {
    $.ajax({
        type: "GET",
        url: "some-url/" + $("#played_number_game_id").children("option:selected").val(),
        async: false, 
        dataType: "html",
        error: function(XMLHttpRequest, status, errorThrown) {
            alert("oh no!");
            alert(status);
        },
        success: function (data, status) {
            $("#parent-element").html("");
            $("#parent-element").append(data);
        },
        complete: function() {
        }
    });

    $("#my_form_submit").click(function() {
        $("#my-form").ajaxSubmit({ clearForm: true }); 
        return false;
    });
});

HTML-код, возвращаемый вызовом ajax:

<input id="my-form_e_1" class="number-input" type="text"/>
<input id="my-form_e_2" class="number-input" type="text"/>

И если я использую firebug для просмотра страницы после вызова метода ajax, динамически загружаемый html находится прямо в иерархии, где он должен быть... т.е. он находится в форме.

Но когда я нажимаю кнопку отправки, публикуются только те элементы формы, которые существовали до вызова ajax.

Есть идеи?

Источник

2 ответа

Решение

Ваша проблема, кажется, в том, что динамически добавленные элементы ввода не имеют name атрибутов. Входные элементы требуют name атрибуты, если вы хотите, чтобы их значения были включены в представленные данные.

Источник

Это довольно просто, просто добавьте элемент формы к тегу body и установите его стиль "display:none"

Источник
Другие вопросы по тегам