CODEWITHSUNDEEP
javascriptjquerycssforms
Jibeji
Jibeji

Reputation: 473

Comments system : open a complex form (editor) next to Reply button

I have written a comment system in PHP. Currently, the editor is on the top of the page:

<form method="POST" id="comment_form" enctype="multipart/form-data">
   <input type="text" name="comment_name" id="comment_name" value="<?php echo $user ?>" placeholder="User" />
   <textarea name="comment_content" id="comment_content" placeholder="Comment" rows="5"></textarea>
   <input type="hidden" name="comment_id" id="comment_id" value="" />
   <input type="submit" name="submit" id="save" class="btn" value="Send" />
</form>

Each comment look like that (simplified):

<div class="comment">
   <b><?php echo $row["user"] ?></b>
   <div>
      <?php echo $row["comment"] ?>
   </div>
   <button type="button" class="btn reply" id="'.$row["comment_id"].'">Reply</button>
</div>

An small javascript function sets the focus on the editor when the Reply button is clicked:

$(document).on('click', '.reply', function(){
   var comment_id = $(this).attr("id");
   $('#comment_id').val(comment_id);
   $('#comment_name').focus();
   });
});

I would like that editor to open below any Reply button when one of the buttons is clicked.

I guess that adding the editor code after each comment with a "display: none" attribute is not the best solution.

Would you please help me to achieve that ?

Upvotes: 0

Views: 51

Answers (1)

Mitya
Mitya

Reputation: 34556

If I understand correctly you want one form for all comments, rather than duplicating the form HTML inside every comment.

In which case you need to move it in the DOM via JavaScript. You don't show any attempt at this but it might look something like this:

$(document).on('click', '.reply', function() {
   $('#comment_form').insertAfter(this); //<-- move form
   var comment_id = $(this).attr("id");
   $('#comment_id').val(comment_id);
   $('#comment_name').focus();
});

Note also that your JS is syntactically invalid as you have double });.

Upvotes: 1

Related Questions