如何序列化包含 jQuery ajax 加载字段的表单？答案

【问题标题】：How to serialize a form that contains jQuery ajax loaded fields?如何序列化包含 jQuery ajax 加载字段的表单？
【发布时间】：2015-11-26 16:18:49
【问题描述】：

这是主要形式：

<div>
     <form method="post" class="register" id="wiz-config">
        <!-- HTML -->
        <input type="radio" value="187" name="group-1" id="product-187" class="aselector" >
        <input type="radio" value="188" name="group-1" id="product-188" class="aselector" >
        <!-- HTML -->
        <!-- Other ajax fields -->

     </form>
</div>

其他 ajax 字段通过 ajax 加载。

问题是，如果我使用

jQuery( document ).ready(function() {
var str = jQuery( "#wiz-config" ).serialize();
console.log(str);
});

它返回的是“空的”。为什么？

【问题讨论】：

Ajax 与您的问题无关；)
不，这里是错字。对不起。原始代码有#
你能更新你的代码来显示这个吗？
你能显示JavaScript代码吗？
如果您在准备好文档时调用您的脚本，则会加载 ajax 元素，并且无论如何都不会检查代码中的无线电输入（因此它们不会被序列化）。提交后必须序列化表单

标签： javascript jquery ajax forms

【解决方案1】：

你刚刚忘记输入the selector #：

$( "#wiz-config" ).serialize();

【讨论】：

【解决方案2】：

您的 jQuery 选择错误。您需要#，因为您正在尝试按 ID 进行选择。

$("#wiz-config" ).serialize();

ID 选择器（“#id”）：选择具有给定 id 的单个元素属性。

或者如果您的页面中只有一个表单，您也可以尝试这样做来获取表单

var _form = $("form");
console.log(_form);
var serializedVersion = _form.serialize();

编辑：根据评论，您没有获得动态添加的表单元素。我能想到的唯一原因是，您可能没有提供name 属性，它对这些动态添加的表单元素很有价值。 serialize 方法将仅序列化具有有效 name 属性的那些元素。

以下应该可以正常工作。

$(function(){

   var newItems="<input name='place' type='text' />";

   $("#wiz-config").append(newItems);

});

Here 是一个工作示例。

【讨论】：

但是这样它不会返回ajax加载的字段。
@AlexRighetto 查看我的更新答案和 jsbin 示例。
@Shyju 好点，但作为旁注，未检查的无线电输入未序列化，OP 在文档准备好时调用它

【解决方案3】：

您调用的是元素而不是 ID。

$("wiz-config").serialize();

正在寻找一个元素，如p、div等

要通过 ID 调用项目，您需要添加前导 #：

$("#wiz-config").serialize();

【讨论】：