Question about selecting form children jquery
<p>Again I'm asking question about comment form, I'm making an image website and every image has its own comment form, so when I submit form I do like this :</p>

<pre><code>$('#comment_form').live('submit', function() {
 ...
</code></pre>

<p>So in order to select only this form textearea value I tried using this but I get undefined error here is how I tried :</p>

<pre><code>$('#comment_form').live('submit', function() {
 image_comment_text=$(this).closest("#comment_text").val(); //textarea id is comment_text
</code></pre>

<p>I tried to used find(), its working but when I submit comments for few images I get comments 2 or 3 times as I should, because find finds all occurrences of textarea with comment_text id .. how can I do this ?</p>

<p>@molf , here is HTML generated by javascript: </p>

<pre><code>var xHTML = "&lt;div class=\"addComment\"&gt;";
   xHTML += "&lt;form action=\"&lt;?=base_url()?&gt;images/post_comment/" + post + "\" method=\"post\" class=\"comment_form\" name=\"comment_form\"&gt;";
   xHTML += "&lt;input type=\"hidden\" class=\"comment_post_id\" name=\"comment_post_id\" value=\"" +post + "\"/&gt;"; 
   xHTML += "&lt;textarea class=\"comment\" name=\"comment_text\" rows=\"8\" cols=\"40\"&gt;&lt;/textarea&gt;";
      xHTML += "&lt;input type=\"submit\" name=\"submit\" class=\"post_image_comment\" value=\"Comment\"&gt;&lt;span&gt; Don't make it too big!&lt;/span&gt;";
   xHTML += "&lt;/form&gt;&lt;/div&gt;";
</code></pre>

<p><strong>EDIT</strong></p>

<p>When I print to console log the value of textarea I get only one result as I should, now when I try to append the ul comments I get 2 of the same values .. here how it goes ..</p>

<pre><code>&lt;ul class="comments"&gt;&lt;/ul&gt; 
</code></pre>

<p>below is the comment form which is not in the document at all, when certain anchor is clicked the form pops out below <code>.comments</code> , when form submits I want to append the comments to add the new comment to list items of existing unordered list comments , here is the whole code :</p>

<pre><code>$('form[name^="comment_form"]').live('submit', function(event) {
  r= $(this).find('&gt; .comment').val();

                $('&lt;div class="overlay"&gt;&lt;/div&gt;')
    .appendTo('.addComment')
             .fadeIn(200, function() {
          $('.comments')
             .append('&lt;li id="new_append"&gt;' + r + '&lt;/li&gt;')
              .children(':last')
           .height($('.comments li:last').height())
           .hide()
           .slideDown(800, function() { 
             var bodyHeight = $('html').height();
            $('.addComment').fadeOut(500, function() {
              $('html').height(bodyHeight);
           $('h2#leaveAComment').fadeOut(200, function(){$(this).text('Thank you for your comment!').fadeIn(200)});
          });
         });  
        $('html, body').scrollTo( $('#new_append'), 800 );
        });
    event.preventDefault();
            }); 
</code></pre>

<p><strong>EDIT II</strong> @patrick</p>

<p>The javascript which loads the comment form is above .. here is HTML :</p>

<p>-------------BEGIN FOR EACH--------------</p>

<pre><code>&lt;div id="image-12" class="image_content"&gt;
&lt;img src="..." /&gt;
 &lt;ul class="comments hidden"&gt; //This is where the comments are appended to &lt;li&gt;&lt;/li&gt;

 &lt;/ul&gt;

&lt;div style="float: left; display: block; width: 100%;"&gt;
&lt;a id="image_comment-12" class="image_comment" onclick="showComments('12');" href="javascript:;"&gt;Add Comment&lt;/a&gt;
&lt;/div&gt;

  &lt;div id="addComment-12"&gt;//this is where the comment form loads

  &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>----------END--- FOR EACH--------- image ...</p>
