**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](https://github.com/macek/jquery-serialize-object/blob/master/jquery.serialize-object.js) 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](https://github.com/macek/jquery-serialize-object/blob/master/jquery.serialize-object.js) 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](https://github.com/marioizquierdo/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"}

```