Question

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

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

$(document).ready(function() {
$("#add").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/><br>");
    // I am adding 2 new forms there:
    var topic = $( '<form action = "#" method = "POST" name="new_topic" id="new_topic">'+ document.getElementById('csrf_token').value +
                  '<textarea  name="name" maxlength="1000" cols="25" rows="6" id="new_form"></textarea></form>'+
                  '<br><input type="submit" value="Submit" class="newMygt" />');


    var summary = $('<form action = "#" method = "POST" name="new_summary" id="new_summary">'+ document.getElementById('csrf_token').value +
                    '<textarea  name="content" maxlength="1000" cols="25" rows="6" id="new_form"></textarea></form>'+
                    '<br><input type="submit" value="Submit" class="newMygt" />');


    (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

使用简单的表单，所有内容都很流畅，但是当我尝试解析动态添加的表单时。我收到{“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 = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/><br>");
    // I am adding 2 new forms there:
    var topic = $( '<form action = "#" method = "POST" name="new_topic" class="new_topic">'+ document.getElementById('csrf_token').value +
                  '<textarea id ="1" name="name" maxlength="1000" cols="25" rows="6" id="new_form"></textarea><br><input type="submit" value="Submit" class="newMygt" /></form>'
                  );


    var summary = $('<form action = "#" method = "POST" name="new_summary" class="new_summary">'+ document.getElementById('csrf_token').value +
                    '<textarea id="2" name="content" maxlength="1000" cols="25" rows="6" id="new_form"></textarea><br><input type="submit" value="Submit" class="newMygt" /></form>'
                    );


    (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

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

您的</form>标记位于提交按钮
您通常希望序列化submit事件
上的表单
```
$("form").submit(function(event) {

  var obj = $(this).serializeObject();
  console.log(obj);

  var json = $(this).serializeJSON();
  console.log(json);

  event.preventDefault();
});
```
通过这种方式，您将在用户填写之后序列化值。

但是，我们需要对此进行一些修改，因为您正在动态创建表单。我们需要使用＆＃34; live＆＃34; jQuery＆＃39; .on函数
的监听器
$("document").on("submit", "form", function(event) { // ... });

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

Answer 2

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

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

我创建了一个小提琴，可以使用jquery.serializeJSON来试用您的代码：http://jsfiddle.net/vG39k/

我尝试序列化＆＃34;提交＆＃34;事件，并意识到您在表单之外有input type="submit"按钮，因此他们没有触发提交事件。

请注意，在小提琴中，我将</form>结束标记 AFTER 设置为提交按钮，而不是之前。那可能是你的问题。

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

Javascript - 解析动态添加的表单

2 个答案: