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

【问题标题】：jquery .serialize() does not work on dynamically loaded formjquery .serialize() 不适用于动态加载的表单
【发布时间】：2012-01-11 14:29:03
【问题描述】：

我有一个通过图像点击触发的 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 测试 echo 的东西。

【问题讨论】：

如何重新填充输入？动态加载的表单是指动态创建还是实现？
@Rolice The line $( "#myFormQuestions" ).html(data);可以。来自 ajax 调用的响应。
通过这种方法，DOM 可能不受影响，并且序列化不起作用。
参见 jQuery .add() 和 .append() 方法。
我希望缺少的双引号是一个错字：<input type="text name="fred"/>

标签： javascript jquery html

【解决方案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>

这很好，每次提交页面帖子给自己，然后作为响应搜索输入并将输入放入表单输入目录。

【讨论】：

是的。我还认为它可能是无效的 html。我通过解析器运行它，没有什么会影响 jquery（主要是缺少 alt 等）。不幸的是，我无法发布真正的代码，我的雇主可能不会喜欢它。在我了解 ajax 测试的东西是如何工作的之后，我会尝试让 jsfiddle 正确演示。
您是否尝试过修改选择器？我已经测试了我的示例，它工作得很好。另外，查看绑定事件处理程序，当您有动态 html 加载时使用 .live('event', function(e)) where event click 或任何事件。
对不起。你的回答是正确的。我忽略了回应。它回来时包含了表单标签，因此我有两个同名的表单。我使用 .find 只添加需要的内容，这解决了问题。谢谢你的帮助。获得 50 分。
.live() 现在在当前 jquery 版本中被 .on() 取代（更新仅供参考：））

【解决方案2】：

顺便说一句，虽然我看过 JSFiddle 几次但不知道它是什么，但我点击了链接，哇，多么棒的开发帮助！我肯定会把这个添加到我的工具箱中！

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

我不知道您需要为要序列化的项目定义名称属性！

这是我的小提琴：jsfiddle dynamically form and serialize

在aspx页面中：

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

点击徽标提交表单

在启用 JQuery 的 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++;
}

【讨论】：

【解决方案3】：

我遇到了同样的问题并通过调用“remove”修复它，然后调用“appendTo”

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

【讨论】：

【解决方案4】：

如果 ' type="text ' 之后缺少的双引号不仅是您帖子中的拼写错误，而且是您在服务器响应中的实际 HTML（不是初始页面 HTML，尽管自第一次调用 serialize() 以来似乎有效)，这可能是导致问题的原因。

添加了双引号：

http://jsfiddle.net/dCDwB/

没有它：

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

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

【讨论】：

不，抱歉，这只是 SO 中的一个错字。

【解决方案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'))"

【讨论】：

我想过这个，但提交时没有完成。单击 imagen 会启动 ajax 调用。
很抱歉我现在得走了，我回家后会发一个完整的遮阳篷。
我已经更新了遮阳篷，抱歉昨天没能更新。
jquery.load 执行 Ajax 调用，并在您指定加载的对象中返回结果。例如：$('#div').load('page.php') 和您的 php 文件：echo 'hello world' 将返回：<div id="div">hello world<div>
这似乎在一个参数中传递所有数据。这意味着我的服务器端代码不起作用。

【解决方案6】：

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

【讨论】：