Javascript – 解析动态添加的表单

如何使用动态添加的表单？

你好。 我正在使用以下代码片段向我的页面动态添加表单。 现在一切正常：

$(document).ready(function() { $("#add").click(function() { var intId = $("#buildyourform div").length + 1; var fieldWrapper = $("

"); // I am adding 2 new forms there: var topic = $( '
'+ document.getElementById('csrf_token').value + '
'+ '
'); var summary = $('
'+ document.getElementById('csrf_token').value + '
'+ '
'); (topic).appendTo(fieldWrapper).show('slow'); (summary).appendTo(fieldWrapper).show('slow'); $("#buildyourform").append(fieldWrapper); }); 

添加表单后，我使用一个名为jquery-serialize-object的强大工具解析它们并创建一些对象文字（f.ex。 {"name":"John","content":"blah blah"} ）。

然后我用JSON.stringify()将这些对象文字转换为Json

一切都用简单的forms顺利进行，但是当我尝试解析动态添加的表单时。 我收到{“name”：“”，“content”：“”}数据，因为我正在解析的表单尚不存在。

问题：我可以获得一些阅读材料或提示如何修改jquery-serialize-object来解析我动态广告的表单？ 扩展程序的代码对我来说有点太复杂了。

编辑：

我发现了另一个Javascript片段jquery.serializeJSON ，它将一个表单序列化为一个JavaScript对象（以后json.stringify（）将它转换为Json）它似乎更新，并且它是积极开发的，但是我我得到了完全相同的结果： {"name":"","content":""}

答案：

我实际上应该在提交事件上序列化表单而不是按钮单击。 这样我将在用户填写数据后对数据进行序列化。我应该在提交按钮之后放置结束标记，而不是之前。 工作代码：

 $(document).ready(function() { $("#add").click(function() { var intId = $("#buildyourform div").length + 1; var fieldWrapper = $("

"); // I am adding 2 new forms there: var topic = $( '
'+ document.getElementById('csrf_token').value + '
' ); var summary = $('
'+ document.getElementById('csrf_token').value + '
' ); (topic).appendTo(fieldWrapper).show('slow'); (summary).appendTo(fieldWrapper).show('slow'); $("#buildyourform").append(fieldWrapper); }); $('#buildyourform').on('submit', 'form', function() { var $submittedForm = $(this); // form where you clicked submit button var $forms = $submittedForm.parents('.fieldwrapper').find('form'); // both forms var serializedForm = $forms.serializeJSON(); // serialize both forms var json = JSON.stringify(serializedForm); alert(json) event.preventDefault(); // do not submit the form }); 

现在我得到了我想要的东西：

 {"name":"John","content":"blah blah blah"} 

Answer 1

插件没有任何问题，serializeJSON和serialize-object都可以读取动态创建的表单。

我不知道你以后如何阅读这些表格，但是你需要确保它们在你序列化时存在。

我用jquery.serializeJSON创建了一个小提琴来试用你的代码： http ： //jsfiddle.net/vG39k/

我试图序列化“提交”事件，并意识到你在表单外面有input type="submit"按钮，所以他们没有触发提交事件。

请注意，在小提琴中，我将结束标记放在提交按钮之后，而不是之前。 那可能是你的问题。

提示：使用fiddle.net或其他类似工具测试您的代码;）

Answer 2

我马上看到了几个问题，但我还没有时间完全回答你的答案

1. 您的标记位于提交按钮之前

2. 您通常希望在submit事件上序列化表单

    $("form").submit(function(event) { var obj = $(this).serializeObject(); console.log(obj); var json = $(this).serializeJSON(); console.log(json); event.preventDefault(); }); 

   这样，您将在用户填写后将序列化值。

   但是，我们需要对此进行一些修改，因为您正在动态创建表单。 我们需要使用jQuery的.on函数的“实时”监听器

    $("document").on("submit", "form", function(event) { // ... }); 

   这将向文档附加单个提交事件侦听器，但它将由任何冒充提交事件的表单触发。 这意味着它也适用于在页面加载后动态创建的表单。