单击链接时如何使表单呈现？

Question

I'm newbie in javascript and I want to render a form when user clicks a button, I tried different methods but I wasn't successful. Here is the code:

 <a href="" id="reply">Reply</a>
 <form action="" method="post" >
     <textarea name="comment" class="comment_textarea"></textarea>
     <input type="hidden" name="id" value="5"> 
     <input type="submit" class="btn"  value="Reply">
 </form>

I'm using this in threaded comments. I just want to render this form when user clicks reply button and otherwise this form should not be displayed.

Answer 1

You can hide form using css:

 <a hred="" id="reply">Reply</a>
 <form action="" method="post" id="reply-form" style="display:none">
     <textarea name="comment" class="comment_textarea"></textarea>
     <input type="hidden" name="id" value="5"> 
     <input type="submit" class="btn"  value="Reply">
 </form>

and then show it when user clicks reply button:

$('#reply').click(function() { $('#reply-form').toggle(); });

UPDATE Now as I saw your HTML:

Firstly, never use one id for more than one element, use class instead:

<a hred="" class="reply">Reply</a>

Now you can use next() to toggle form:

//  for each element with class reply, find next form element and toggle visibility
$('.reply').click(function() { $(this).next('form').toggle(); });​​​​

Answer 2

As @des said, you could use a#reply as a trigger. In jquery it only needs a couple of lines of code:

  $('.reply').click(function() { 

  $(this).parent().find('.reply-form').toggle(); 


 });​

Example