CODEWITHSUNDEEP
javascriptjquery
user813813
user813813

Reputation: 355

Using jquery to get value of text area in closest table cell

I have the following table

<tr>
<td data-toggle="tooltip" title="Not Started"><img  src="images/small_info_icon.png"></td>
<td>Demo Demo</td>
<td>January</td>
<td class="updaterow"><textarea class="form-control" rows="5" id="notes34455" name="editcomments">Not Started</textarea></td>
<td id="34455"><button type="button" id="updatestatus" class="btn btn-info btn-sm">Update</button> </td>
</tr>

I want to use jquery to get the value of the textarea. I am using the following, but it is giving undefined.

$("button#updatestatus").click(function(){
var id = $(this).closest('td').attr('id');
var data = $(this).closest("updaterow").text;     
alert(data); 
var data = {
            id: id,

            };
$.ajax({
type: "POST",
url: "updatestatus.php",
data: data
}).done(function(msg) {
console.log(msg);           
});

Is it possible to get the textvalue of the textarea?

Upvotes: 0

Views: 3507

Answers (3)

Yasser Shaikh
Yasser Shaikh

Reputation: 47794

This is what you need - 

$(this).closest('tr').find('textarea').val();

Here is a fiddle for the same - https://jsfiddle.net/v44rzxLo/1/. On a side note, do not have same ids for multiple elements.

Upvotes: 0

Raj
Raj

Reputation: 2028

This is what you want

$("button#updatestatus").click(function(){

var data = $(this).parent().prev("td.updaterow").find("textarea").val();     
alert(data); 

});

Here is an example

$("button#updatestatus").click(function(){

var data = $(this).parent().prev("td.updaterow").find("textarea").val();     
alert(data); 
       
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>


<table>
<tr>
<td data-toggle="tooltip" title="Not Started"><img  src="images/small_info_icon.png"></td>
<td>Demo Demo</td>
<td>January</td>
<td class="updaterow"><textarea class="form-control" rows="5" id="notes34455" name="editcomments">Not Started</textarea></td>
<td id="34455"><button type="button" id="updatestatus" class="btn btn-info btn-sm">Update</button> </td>
</tr>

</table>

</html>

Upvotes: 1

Barmar
Barmar

Reputation: 781503

.closest() looks for the closest containing element that matches the selector. .updaterow doesn't contain button#updatestatus, so it won't find it. .updaterow is the previous td, so it should be:

var data = $(this).closest("tr").siblings(".updaterow").text();

You also forgot the . in .updaterow and the () in .text().

Upvotes: 1

Related Questions