jquery toggle form into div and no response on submission

Question

I have a comment with reply button on a product page.

all comments are fetching from db (ajax called) into certain div block when page is loaded, please note there is a reply button for each comment and <div class="quickReplyForm"></div> is suppose to show the reply form once the reply button is clicked.

load comments (ajax)

while($row = $res->fetch_assoc()){

    $msg .= '
            <div class="bs-callout bs-callout-info">
                <h5><b>'.$row['name'].'</b> <small>'.date('M d, Y @ h:i A', strtotime($row['date'])).'</small></h5>
                <p>'.$row['comment'].'</p>
                <p><button type="button" class="btn btn-xs btn-success btn_reply" data-name="'.$row['name'].'" data-id="'.$row['id'].'"><span class="glyphicon glyphicon-share-alt"></span> Reply</button></p>
                <div class="quickReplyForm"></div>
            </div>';
}

here is reply form which is preset and hidden in top of the page ready to trigger and show inside <div class="quickReplyForm"></div> block:

<div class="row reply_form" style="display:none;">
<div class="col-md-6">
<form role="form" id="reply_form">
    <div class="form-group">
      <input type="text" class="form-control input-sm" name="message">
    </div>
    <button type="button" class="btn btn-success" id="btn_reply_comment">Reply Comment</button>
</form>
</div>
</div>

then in jquery:

$('body').on('click','.btn_reply',function(){

    var id = $(this).data('id'); //get the `id` from data property
    var name = $(this).data('name');
    //alert(id + "/" + name);

    $(this).after('<div class="quickReplyForm">'+$(".reply_form").html()+'</div>');

});

my first question is, the form is displayed in each of the <div class="quickReplyForm"></div> block when reply button is clicked, but the form will keeps shown up for each time reply button is clicked, how can it be avoid? and how to properly shown up the form inside its 'body'?

EDITED

second question, the form doesn't post the input parameters, the alert of parameters is return message={empty}?

$('body').on('click','#btn_reply_comment',function(){
    var parameters = $('#reply_form').serialize();
    alert(parameters);

});

Thanks for the solution!

Answer 1

1st answer: You need to hide form before show reply form;

$('body').on('click','.btn_reply',function(){
    // Hide previous form
    $(".quickReplyForm").remove();
    var id = $(this).data('id'); //get the `id` from data property
    var name = $(this).data('name');
    $("#comment_id").val(id);
    //alert(id + "/" + name);

    $(this).after('<div class="quickReplyForm">'+$(".reply_form").html()+'</div>');

});

And another importan point, you need to update id and name field of reply form on each opened form. Or else, you save comment on wrong comment

2nd answer: In your second case you need to use delegate structure;

$('body').on('click','#btn_reply_comment',function(){
    var parameters = $(this).closest('#reply_form').serialize();
    alert(parameters);
    // ajax here
});

Here is a working demo for 2nd answer: jsfiddle

Edit:

In order to add id to comment form,

You can do that by adding a hidden form to .reply_form like;

<div class="row reply_form" style="display:none;">
<div class="col-md-6">
<form role="form" id="reply_form">
    <div class="form-group">
      <input type="text" class="form-control input-sm" name="message">
    </div>
    <input type="hidden" id="comment_id" value=""/>
    <button type="button" class="btn btn-success" id="btn_reply_comment">Reply Comment</button>
</form>
</div>
</div>

And then, before opening form you can call;

$("#comment_id").val(id);