How to get textarea text using jQuery?

Learn how to access or get the text present in the textarea using jQuery?
Submitted by Pratishtha Saxena, on February 10, 2023

Getting textarea's text

The textarea is an HTML element that is usually used whenever multiple line input has to be given, say, in case of providing address, comments, etc. Now, over here we will be learning how to access and get that input given by the user in the textarea. For this task, the very widely used val() method of jQuery will be considered.

jQuery val() Method

The val() method helps to get the value of the selected form field or the element. The specified element is selected using the selector and further using this method its value can be accessed. If there is no 'value' attribute for that element, then val() returns its text value of its.

Syntax:

$(selector).val();

This is a very simple method and does not take any parameters for returning the value of the selected element in jQuery. In the example given below, a comment box can be seen. When the comment is entered there and hence submitted, that comment will be visible in the following comment section.

jQuery example to get textarea text

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      button{
      margin: 2%;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery Get Textarea Text</h2>
    <h4>Submit the comment to view the output.</h4>
    <hr>
    <div>
      <p>Welcome to Include Help !</p>
      <p>This is a JavaScript Tutorial.</p>
      <p>Thanks for Visiting !</p>
      <br><br>
      Enter Comment: 
      <textarea></textarea>
      <br>
      <button>Submit</button>
    </div>
    <hr>
    <h4 id="one"><u>Comment Section</u></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('h4#one').append('<br><br>' + $('textarea').val());
        });
    });    
  </script>
</html>

Output:

Example: How to get textarea text using jQuery?

How to disable scrolling temporarily using jQuery?

jQuery Same Click Event For Multiple Elements

Comments and Discussions!

Load comments ↻