Question

I want to reference the content of a text area, but I keep getting undefined:

$(".send-comment").click(function(e) {
    e.preventDefault();
    var data = $(this).siblings(".comment-text").val();
    alert(data);
});

<tr>
    <td>#textAreaTag(label=false, name="comment[text]", class="comment-text")#</td>
    <td>#submitTag(value="Send", class="send-comment")#</td>
</tr>

I suspect it might be because the send button has no siblings (it’s alone in a td)… but surely, there has to be a better way to get the value than using this.parent().sibling().child()…

I’m using classes because I have several comment forms on the same page that belong to different posts.

FYI, the generated source from my framework is as expected…

Answer 1

Try this:

$(".send-comment").click(function(e) {     
    e.preventDefault();     
    var prevCell = $(this).parent().prev();
    var data = $(".comment-text", prevCell).val();     
    alert(data); 
}); 

Alternate:

$(".send-comment").click(function(e) {     
    e.preventDefault();     
    var data = $(".comment-text", $(this).closest("tr")).val();     
    alert(data); 
});