Question

I have Commenting system in my app. For a single video entry anyone can post a comment and someone else can post reply to that comment and replies, cannot have thier further reples, similar to StackOverflow is doing (1 Answer, and thier 1 or more replies).

I want the similar functionality what SO has, Let’s I have the following HTML

<div class="comment" id="comment-908">
  First comment
</div>
<div class="reply">
  <div id="reply-909>
     reply 1
  </div>
  <div id="reply-910>
     reply 2
  </div>
  <div id="reply-911>
     reply 3
  </div>
</div>
<form id="reply-form">
  <textarea id="replycomment" name="replycomment"></textarea>
  <input type="submit" name="submit-reply" value="add reply" />
</form>

Now above HTML is a sample which I have created, When someone will click on “add reply” button then I am using jquery to post there reply.

Now I want to know that there will be multiple comment and multiple add reply forms. So who clicks on which button and for which comment someone wants to post a reply, how will i know that?

The above HTML is not in correct way, please suggest me the correct HTML flow which I can use and how to work with jquery?

now I want to know when soe

Answer 1

Change the HTML form to something similar first:

<form class="reply-form" action="url/to/submit/123456" method="post">
    ...
</form>    

The reason behind this is, you cannot have same id for more than one element, so, to simplify the problem, you can just make all reply form to be in class reply-form (which is straightforward). Adding the form action with the id is also a good practice so that even your client don’t have javascript/ajax enabled, it can still functional when clicking on the submit button.

And then, the rest of the work would be (suppose your form is ajax submit):

$(".reply-form").each(function(){
    var form = $(this);
    var submitUrl = form.attr("action");
    $("input:submit", form).click(function(){
        // implement the submit logic here.
    });
});