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.