w3docs logo
  1. Snippets
  2. JavaScript
  3. How to Get the Value of a Textarea using jQuery

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 inside the textarea to send the text to the server when it is clicked. You can get the text using the val() method:

<!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.

Do you find this helpful?