Jquery Ajax Form Array Submit

I have a form comment section whereby a user can reply to a comment. Each comment has a form with a reply box. Am getting the comments from the database and running the following l

Solution 1:

First, replace the id on the form with a class.

<form action="..." method="post" class="commentForm">
<inputtype="text" name="reply" value="" placeholder="Reply">
<inputtype="hidden" name="response_id" value="{{$response->id}}">
<inputtype="submit" name="" value="reply">
</form>

Then register a submit-event handler on the forms to make the ajax call. Inside the event handler callback, this refers to the form being submitted. You can use that to get the values of the inputs for that form.

$('.commentForm').submit(function(event) {
    event.preventDefault();

    var$form = $(this);
    var formData = {
        answer     : $form.find('input[name=answer]').val(),
        reply      : $form.find('input[name=reply]').val(),
        response_id: $form.find('input[name=response_id]').val()
    };

    // Make the ajax call here.
});

However, you should be able to skip putting together the formData object, and use the following for your ajax call:

data: $(form).serialize(),

Solution 2:

Your code is looping and creating multiple forms with same name of textboxes, so jquery cannot recognize type='name' are you specifying when your write $('input[name=answer]').val();

So I would suggest you add id to all 3 input tags. For each loop all 3 tags should have the same id. Then you can recognize them individually.