JQuery Ajax 表单和动态创建的表单元素未提交

发布于 2024-08-14 19:06:31 字数 1154 浏览 4 评论 0原文

我正在编写一个表单，当选择列表更改时，会动态加载一些文本输入元素。

问题是，当我提交表单时，这些元素不会在发布到服务器的数据中发送。

我需要做什么才能将这些动态创建的元素“放入”要提交的表单中？

代码是这样的：

$("#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;
    });
});

ajax 调用返回的 html 是：

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

如果我在调用 ajax 方法后使用 firebug 查看页面，动态加载的 html 就在层次结构中它应该在的位置......即它在形式。

但是，当我单击“提交”按钮时，仅发布 ajax 调用之前存在的表单元素。

有什么想法吗？

原文

I'm writing a form that has some text input elements loaded dynamically when a select list is changed.

The problem is that when I submit the form those elements are not sent in the data that is posted to the server.

What do I need to do to get those dynamically created elements "into" the form to be submitted?

The code is something like this:

$("#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;
    });
});

The html returned by the ajax call is:

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

And if I use firebug to look at the page after calling the ajax method the dynamically loaded html is right in the hierarchy where it should be...i.e. it's in the form.

But when I click the submit button only the elements of the form that existed before the ajax call get posted.

Any ideas?

分享到QQ

分享到微博