How to Get Text Area Value in JavaScript

Muhammad Muzammil Hussain Feb 02, 2024 JavaScript JavaScript Text
  1. Get Text Area Value in JavaScript
  2. Get Text Area Value in jQuery
How to Get Text Area Value in JavaScript

In web development, most of the time, we need to read and get the text area value using HTML DOM documents and other libraries. We can deal with it using both JavaScript and jQuery default functions.

In this article, we will learn to get the value of the text area of a webpage using JavaScript and jQuery and store it into a variable.

Get Text Area Value in JavaScript

In JavaScript, we can read the text value using the HTML DOM document method getElementById("elementId").value. The method getElementById() returns an element with defined value; if the element does not exist, it returns null.

The property .value places and returns the value of the attribute value of a text area. That property carries the default value or the value that a user gives.

Basic Syntax:

Here, we get the value of a specific element using the ID and storing it in the textValue variable.

let textValue = document.getElementById('myText').value

Example code:

<!DOCTYPE html>
<html>
<body>

<h1>
Get text area value in JavaScript
</h1>

Enter any value: <input type="text" id="myElement" value="Default">

<p>Click the button to read the value.</p>

<button onclick="myFunction()">Read Value</button>

<script>
function myFunction() {
 let result = document.getElementById("myElement").value //getting value, storing in variable
  alert(result) // displaying in alert
}
</script>

</body>
</html>

Example code explanation:

  1. In the above HTML source, we have created an input field to get the value from the user.
  2. Then, we created a button onclick event of that button called myFunction().
  3. In the body of myFunction(), we have declared the result variable and assigned that variable an element value using document.getElementById("myElement").value .
  4. Finally, we displayed the result variable value to the user in an alert.
  5. You can save the above source with the .html extension and open it in any browser to see the result.

Get Text Area Value in jQuery

In jQuery we can read the text value using the jQuery method $("#elementID").val(). First, we need to add jQuery CDN (content delivery network) in script tags of the header.

Example code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
    alert( $("input:text").val()); //read value from input and display in alert
    });
});
</script>
</head>
<body>

Enter any value: <input type="text" id="myElement" value="Default"> //getting value from user

<button >Read Value using jQuery</button>

</body>
</html>

Example code explanation:

  1. In the above HTML code, we have created an input field to get the value from the user.
  2. We have created a button for calling the jQuery function.
  3. In <script> tags, we have called a click event on the button.
  4. Inside that click event, we have read the text area value given by the user and displayed it in an alert.
  5. You can save the above source with the extension of .html and open it in any browser to see the result.
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe

Related Article - JavaScript Text