Javascript - 解析动态添加的表单 [英] Javascript - parsing dynamically added forms

问题描述

我使用下面的代码片段动态地将表单添加到我的页面。现在一切正常：

$ $ $ $ $ $ $ $ $ $$＃$ $ $ ）.click（function（）{
var intId = $（＃buildyourform div）。length + 1;
var fieldWrapper = $（< div class = \fieldwrapper \ id = \field+ intId +\/>< br>）;
//我在这里添加2个新的表单：
var topic = $（'< form action =＃method =POSTname =new_topicid =new_topic>'+ document.getElementById（'csrf_token'）。value +
'< textarea name =namemaxlength =1000cols =25rows =6id =new_form>< / textarea>< / form>'+
'< br>< input type =submit value =Submitclass =newMygt/>'）;


var summary = $（'< form action =＃method =POSTname = new_summaryid =new_summary>'+ document.getElementById（'csrf_token'）。value +
'< textarea name =contentmaxlength =1000cols =25ro ws =6id =new_form>< / textarea>< / form>'+
'< br>< input type =submitvalue =Submitclass =newMygt />'）;


（topic）.appendTo（fieldWrapper）.show（'slow'）;
（摘要）.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>）; 
 //我在这里添加2个新表单：
 var topic = $（'< form action =＃method =POSTname =new_topicclass =new_topic>'+ document.getElementById（'csrf_token'）。value + 
'< textarea id =1name = namemaxlength =1000cols =25rows =6id =new_form>< / textarea>< br>< input type =submitvalue =Submitclass = newMygt/>< / form>'
）; 
 
 
 var summary = $（'< form action =＃method =POSTname = new_summaryclass =new_summary>'+ document.getElementById（'csrf_token'）。value + 
'< textarea id =2name =contentmaxlength =1000cols =25  rows =6id =new_form>< / textarea>< br>< input type =submitvalue =Submitclass =newMygt/>< / form>'
）; 
 
 
（topic）.appendTo（fieldWrapper）.show（'slow'）; 
（摘要）.appendTo（fieldWrapper）.show（'slow'）; 
 $（＃buildyourform）。append（fieldWrapper）; 
 
 
}）; $（'＃buildyourform'）。on（'submit'，'form'，function（）{
 $ $ $ $ $ $ $ 
 
 
 
 
 
 
 
 
 
 
 
 
 $ b $ $（this）; // form你点击提交按钮
 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（）; //不提交形式
}）; 
  

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

  {name：John，content：blah blah blah} 
  

解决方案

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

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

我创建了通过试用您的代码： http://jsfiddle.net/vG39k/

我试图序列化submit事件，并意识到您在表单外部有 input type =submit按钮，所以它们不会触发提交事件。

请注意，在小提琴中，我将< / form> 关闭标记 AFTER 提交按钮，而不是之前。
这可能是你的问题。

提示：使用小提琴。 net 或其他类似的工具来测试你的代码;）

How can I work with forms that have ben added dynamically ?

Hello. I am dynamically adding forms to my page using the following code snippet. Now everything works fine:

$(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);


});

After adding the forms I am parsing them with a great tool called jquery-serialize-object and creating some object literals (f.ex. {"name":"John","content":"blah blah"}).

And then I am turning those object literals into Json with JSON.stringify()

Everything woorks smoothly with simple forms, but when I try to parse form that I add dynamically. I am receiving {"name":"","content":""} data, because the form that I am parsing does not exist yet.

The question: Could I get some reading material or tips how could I modify the jquery-serialize-object to parse forms that I ad dynamically ? The extension's code is a bit too complicated for me.

EDIT:

I found another Javascript snippet jquery.serializeJSON that serializes a form into a JavaScript Object (for json.stringify()'ing it into Json later) and it seems that it is more up-to-date and it is actively developed, but I am getting completely same results with it: {"name":"","content":""}

THE ANSWER:

I actually should serialize the forms on the submit event and not on the button click. This way I will be serializing data after the user fills it in. And I should have put the closing tag AFTER the submit buttons, not before. The working code:

$(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
});

Now I am getting exactly what I wanted:

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

解决方案

There's nothing wrong with the plugins, both serializeJSON and serialize-object can read dynamically created forms.

I don't know how are you reading the forms later, but you need to make sure they exist at the time you are serializing them.

I created a fiddle to try out your code with jquery.serializeJSON: http://jsfiddle.net/vG39k/

I tried to serialize on "submit" event, and realized that you had the input type="submit" buttons outside the forms, so they didn't fire a submit event.

Note that in the fiddle, I put the </form> closing tag AFTER the submit buttons, not before. That could be your problem.

HINT: use fiddle.net or other similar tool to test your code ;)

这篇关于Javascript - 解析动态添加的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！