jquery .serialize() 不适用于动态加载的表单

Question

我有一个通过图像点击触发的ajax提交的表单，提交表单后它被返回并重新加载。 但是 .serialize() 已停止工作。

这是一些代码：

<form id="myForm" action="/someFormSubmitPage.do">
    <div id="myFormQuestions">
        <input type="text" name="fred"/>
        <!--more inputs-->
    </div>
 <img id="submitButton" src="some/path">
</form>

提交按钮的图像通过 .click 在 jquery 下面的函数中触发

var serializedForm = $("#myForm").serialize();
$.post("/someFormSubmitPage.do", serializedForm, function( data ) {
    //do some stuff with the data
    $( "#myFormQuestions" ).html(data);
});

这在第一次提交时工作正常，但在第二次提交时，尽管用户重新填充了输入，但 var 序列化的表单最终还是一个空字符串

编辑：我现在已经包含了一个JSFiddle ，但是，我不确定如何使用 ajax tesing echo 的东西。

Answer 1

你能看看回复的回复吗？ 因为我认为这是DOM元素识别的问题。 问题可能是这样的：

你有两个匹配$('#myForm')选择器的元素，jQuery丢失了。 尝试使用$('form#myForm')修改此选择器。 尝试一下，然后在这里发布您的回复。

现在，我已经检查过它是否正常工作，代码是：

<div>
    <form id="myForm">
        <div id="inputs">
            <input name="some" type="text" />
        </div>
        <input type="button" id="my-form-submit" value="submit" />
    </form>

</div>
<script type="text/javascript">
    $('input#my-form-submit').on('click', function(e) {
        var data = $('form#myForm').serialize();
        $.post('/test.php', data, function(response) {
            $('div#inputs').html($(response).find('div#inputs'));
        });
    });
</script>

这样做工作正常，每次提交页面发布到自己，然后在响应中搜索输入并将输入放入表单输入目录。

Answer 2

顺便说一句，虽然我已经看过JSFiddle几次但不知道它是什么，我跟着链接和WOW，这是一个很棒的开发辅助工具！ 我绝对是把这个添加到我的工具箱中！

我修改了代码以动态地将另一个文本输入字段添加到表单中，每次单击提交按钮时，您将获得另一个动态添加的输入（动态名称为“name”和id），并且警报报告表单中的所有命名元素。

我不知道你需要为要序列化的项定义name属性！

这是我的小提琴： jsfiddle动态形式和序列化

在aspx页面中：

<form id="myForm" action="">
<div id="myQuestions">
    <input type="text" name="entryOne"/>
</div>

单击徽标以提交表单

在JQuery Enabled JavaScript中：

var counter = 0;

$(function(){
    $("#submitImage").click(function(){
        startAjaxFormSubmit();
    });
    //there is also another even that calls startAjaxFormSubmit
});


function startAjaxFormSubmit() {
    alert("startAjaxFormSubmit");
    var serializedForm = $("#myForm").serialize();
    alert("serializedForm is:\n=====\n"+serializedForm +"\n=====");

    $.post("/echo/html", serializedForm, function(data) {
        //do something with the data
        $("#myQuestions").append(data);

    });

    var div = $("#myQuestions");
    var $dynalabel = $('<br/>"<label>').text("Dynamic Input " + counter + ": ");
    div.append($dynalabel);
    var $dynaInput = $('<input type="text" name="dynaName_' + counter + '" id="id_' + counter + '"/>');
    div.append($dynaInput);
    counter++;
}

Answer 3

我有同样的问题并通过调用“删除”，然后“appendTo”修复它

var serializedForm = $ ("# myForm").serialize();
$ .post ("/someFormSubmitPage.do" serializedForm, function (data) {
    
     $ ("#myFormQuestions").remove();
     $ (data).appendTo('#myFormQuestions');
});

Answer 4

我添加这个是为了帮助其他人，引导程序示例通常不使用输入字段中的名称标签。 这引起了我的注意，我想知道为什么我不能从我的表单中序列化数据。 简单地说，确保您的输入字段中有名称标签。

Answer 5

那么，我想在Ajax请求时，完整的表单会被更新的HTML替换掉？ 在这种情况下，您可以重新加载表单所在的整个div，以便在重新加载表单时再次绑定事件处理程序。 例如：

<div id="myFormDiv">
     <form id="myForm" onsubmit="myAjaxCall(this)">
     <!-- inputs-->
     </form>
     <img onclick="$('#myForm').submit()"/>
</div>

<!-- javascript-->
function myAjaxCall(form){
     serializedForm = $(form).serialize();
     $('#myFormDiv').load('/submitpage.php'),{formdata:serializedForm}, function(data)(){});
}

或者，当然，如果你说它没有在提交时完成，你可以做<img onclick="myAjaxCall($('#myForm'))"

Answer 6

如果'type =“text'之后缺少的双引号不仅仅是你帖子中的拼写错误，而且还是你服务器响应中的实际HTML（虽然自第一次调用serialize（）以来就不是真正的HTML页面，但是它是可能是什么导致了这个问题。

---

添加双引号的小提琴：

http://jsfiddle.net/dCDwB/

---

没有它：

http://jsfiddle.net/dCDwB/2/

（见控制台，它发送“fred + value％3D =”而不是“fred =”）