jquery .serialize() does not work on dynamically loaded form

Question

I have a form which is submitted via ajax triggered by an image click, after the form is submitted it is returned and reloaded. However the .serialize() has stopped working.

here is some code:

<form id="myForm" action="/someFormSubmitPage.do">
    <div id="myFormQuestions">
        <input type="text" name="fred"/>
        <!--more inputs-->
    </div>
 <img id="submitButton" src="some/path">
</form>

image of the submit button triggers via .click in jquery the below function

var serializedForm = $("#myForm").serialize();
$.post("/someFormSubmitPage.do", serializedForm, function( data ) {
    //do some stuff with the data
    $( "#myFormQuestions" ).html(data);
});

this works fine on the first submit, but on the second, the var serialized form ends up as an empty string despite the user repopulating the inputs

EDIT: I have now included a JSFiddle, however, im not sure how to use the ajax tesing echo thing.

Answer 1

Can you check out what response are coming back? Cause I think that it's the problem with DOM elements identification. The problem could be something like that:

You have two elements matching $('#myForm') selector, and jQuery got lost. Try to modify this selector with $('form#myForm'). Try it, and post here what you have in response.

Now, I've checked if it's work fine, the code is:

<div>
    <form id="myForm">
        <div id="inputs">
            <input name="some" type="text" />
        </div>
        <input type="button" id="my-form-submit" value="submit" />
    </form>

</div>
<script type="text/javascript">
    $('input#my-form-submit').on('click', function(e) {
        var data = $('form#myForm').serialize();
        $.post('/test.php', data, function(response) {
            $('div#inputs').html($(response).find('div#inputs'));
        });
    });
</script>

And that's work fine, each time on submit page post to itself, then in response search for inputs and places inputs into form inputs dir.

Answer 2

As an aside, but while I have seen JSFiddle a couple times but didn't know what it was, I followed the link and WOW, what a great development aid! I'm definitelyAA adding this one to my toolbox!

I modified the code to dynamically add another text input filed to the form, every time the submit button is clicked you get yet another dynamically added input ( with dynamically name 'name' and id ) and the alert reports all the named elements in the form.

I didn't know that you needed to define the name attribute for an item to serialize!

Here is my Fiddle : jsfiddle dynamically form and serialize

In aspx page:

<form id="myForm" action="">
<div id="myQuestions">
    <input type="text" name="entryOne"/>
</div>

Click the logo to submit the form

In JQuery Enabled JavaScript:

var counter = 0;

$(function(){
    $("#submitImage").click(function(){
        startAjaxFormSubmit();
    });
    //there is also another even that calls startAjaxFormSubmit
});


function startAjaxFormSubmit() {
    alert("startAjaxFormSubmit");
    var serializedForm = $("#myForm").serialize();
    alert("serializedForm is:\n=====\n"+serializedForm +"\n=====");

    $.post("/echo/html", serializedForm, function(data) {
        //do something with the data
        $("#myQuestions").append(data);

    });

    var div = $("#myQuestions");
    var $dynalabel = $('<br/>"<label>').text("Dynamic Input " + counter + ": ");
    div.append($dynalabel);
    var $dynaInput = $('<input type="text" name="dynaName_' + counter + '" id="id_' + counter + '"/>');
    div.append($dynaInput);
    counter++;
}