jquery .serialize() 不适用于动态加载的表单

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++;
}

Answer 3

I had the same problem and fixed it by calling "remove", and then "appendTo"

var serializedForm = $ ("# myForm").serialize();
$ .post ("/someFormSubmitPage.do" serializedForm, function (data) {
    
     $ ("#myFormQuestions").remove();
     $ (data).appendTo('#myFormQuestions');
});

Answer 4

I am adding this to help others, bootstrap examples often don't use the name tags in the input fields. This caught me out and I was wondering why I couldn't serialize the data from my form. Simply put ensure you have name tags in your input fields.

Answer 5

So, I guess the complete form is replaced with newer HTML upon the Ajax-request? In that case you could reload the entire div the form is located in, so that the event handlers are binded again when the form is reloaded. eg:

<div id="myFormDiv">
     <form id="myForm" onsubmit="myAjaxCall(this)">
     <!-- inputs-->
     </form>
     <img onclick="$('#myForm').submit()"/>
</div>

<!-- javascript-->
function myAjaxCall(form){
     serializedForm = $(form).serialize();
     $('#myFormDiv').load('/submitpage.php'),{formdata:serializedForm}, function(data)(){});
}

Or, ofcourse, if you say that it is not done on submit you can do <img onclick="myAjaxCall($('#myForm'))"

Answer 6

If the missing double quote after ' type="text ' is not just a typo in your post but also your actual HTML in the server response (not the intitial page HTML though since the first call to serialize() seems to work), it's probably what's causing the problem.

---

Fiddle with double quote added:

http://jsfiddle.net/dCDwB/

---

And without it:

http://jsfiddle.net/dCDwB/2/

(see console, it sends "fred+value%3D=" rather than "fred=")