How to Get the Value of a Textarea using jQuery
To detect the value of the HTML <textarea> element can be achieved via the jQuery val()method. However, be sure to remove any trailing and leading whitespace; otherwise, it may cause unwanted results.
Add a button below the textarea to send the text to the server when it is clicked. You can get the text using the val() method. You should first get the textarea element by id (or any else method you desire) and then call the val() method on it.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js">
</script>
</head>
<body>
<p>Type in the textarea and click the button to see the result.</p>
<textarea id="comment" rows="5" cols="40"></textarea>
<div>
<button type="button">Get Value</button>
</div>
<script>
$(document).ready(function() {
$("button").click(function() {
let comment = $.trim($("#comment").val());
if(comment != "") {
alert(comment);
}
});
});
</script>
</body>
</html>The val() Method
The val() method is a built-in jQuery method which is used to returns or set the value of an attribute for the selected elements. This method applies to the HTML form elements. It is primarily used to get the values of form elements such as input, select and textarea. When the method is called on an empty collection, it will return undefined.