Javascript jquery .serialize() 不适用于动态加载的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8820964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .serialize() does not work on dynamically loaded form
提问by Mark W
I have a form which is submitted via ajax triggered by an image click, after the form is submitted it is returned and reloaded. However the .serialize() has stopped working.
我有一个通过图像点击触发的ajax提交的表单，提交表单后它被返回并重新加载。但是 .serialize() 已停止工作。
here is some code:
这是一些代码：
<form id="myForm" action="/someFormSubmitPage.do">
<div id="myFormQuestions">
<input type="text" name="fred"/>
<!--more inputs-->
</div>
<img id="submitButton" src="some/path">
</form>
image of the submit button triggers via .click in jquery the below function
提交按钮的图像通过 .click 在 jquery 下面的函数中触发
var serializedForm = $("#myForm").serialize();
$.post("/someFormSubmitPage.do", serializedForm, function( data ) {
//do some stuff with the data
$( "#myFormQuestions" ).html(data);
});
this works fine on the first submit, but on the second, the var serialized form ends up as an empty string despite the user repopulating the inputs
这在第一次提交时工作正常，但在第二次提交时，尽管用户重新填充了输入，但 var 序列化表单最终仍为空字符串
EDIT:I have now included a JSFiddle, however, im not sure how to use the ajax tesing echo thing.
编辑：我现在已经包含了一个JSFiddle，但是，我不确定如何使用 ajax tesing echo 的东西。
回答by devdRew
Can you check out what response are coming back? Cause I think that it's the problem with DOM elements identification. The problem could be something like that:
你能看看有什么反应回来吗？因为我认为这是 DOM 元素识别的问题。问题可能是这样的：
You have two elements matching $('#myForm')selector, and jQuery got lost. Try to modify this selector with $('form#myForm'). Try it, and post here what you have in response.
您有两个元素匹配$('#myForm')选择器，而 jQuery 丢失了。尝试使用$('form#myForm'). 尝试一下，然后在此处发布您的回复。
Now, I've checked if it's work fine, the code is:
现在，我检查了它是否工作正常，代码是：
<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>
And that's work fine, each time on submit page post to itself, then in response search for inputs and places inputs into form inputs dir.
这很好，每次提交页面帖子给自己，然后作为响应搜索输入并将输入放入表单输入目录。
回答by Paul Gorbas
As an aside, but while I have seen JSFiddle a couple times but didn't know what it was, I followed the link and WOW, what a great development aid! I'm definitelyAA adding this one to my toolbox!
顺便说一句，虽然我看过 JSFiddle 几次但不知道它是什么，但我点击了链接，哇，多么棒的开发帮助！我肯定会将此添加到我的工具箱中！
I modified the code to dynamically add another text input filed to the form, every time the submit button is clicked you get yet another dynamically added input ( with dynamically name 'name' and id ) and the alert reports all the named elements in the form.
我修改了代码以将另一个文本输入动态添加到表单中，每次单击提交按钮时，您都会获得另一个动态添加的输入（具有动态名称 'name' 和 id ）并且警报报告表单中的所有命名元素.
I didn't know that you needed to define the name attribute for an item to serialize!
我不知道您需要为要序列化的项目定义 name 属性！
Here is my Fiddle : jsfiddle dynamically form and serialize
这是我的小提琴：jsfiddle 动态形成和序列化
In aspx page:
在aspx页面中：
<form id="myForm" action="">
<div id="myQuestions">
<input type="text" name="entryOne"/>
</div>
Click the logo to submit the form
点击标志提交表格
In JQuery Enabled JavaScript:
在启用 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++;
}
回答by Brandao
I had the same problem and fixed it by calling "remove", and then "appendTo"
我遇到了同样的问题并通过调用“remove”然后“appendTo”来修复它
var serializedForm = $ ("# myForm").serialize();
$ .post ("/someFormSubmitPage.do" serializedForm, function (data) {
????
???? $ ("#myFormQuestions").remove();
???? $ (data).appendTo('#myFormQuestions');
});
回答by Rinux
So, I guess the complete form is replaced with newer HTML upon the Ajax-request? In that case you could reload the entire div the form is located in, so that the event handlers are binded again when the form is reloaded. eg:
所以，我猜在 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)(){});
}
Or, ofcourse, if you say that it is not done on submit you can do
<img onclick="myAjaxCall($('#myForm'))"
或者，当然，如果你说它不是在提交时完成的，你可以做
<img onclick="myAjaxCall($('#myForm'))"
回答by Flo
If the missing double quote after ' type="text ' is not just a typo in your post but also your actual HTML in the server response (not the intitial page HTML though since the first call to serialize() seems to work), it's probably what's causing the problem.
如果 ' type="text ' 之后缺少的双引号不仅是您帖子中的拼写错误，而且是您在服务器响应中的实际 HTML（不是初始页面 HTML，但因为第一次调用 serialize() 似乎有效），它是可能是什么导致了问题。
Fiddle with double quote added:
添加了双引号的小提琴：
And without it:
没有它：
(see console, it sends "fred+value%3D=" rather than "fred=")
（见控制台，它发送“fred+value%3D=”而不是“fred=”）
