Set Textarea Value using JQuery

In this tutorial we will see how to Set Textarea Value using JQuery. JQuery .val() method is used for this, which sets the value of textarea element.

Table of Contents

HTML Code

HTML Code is given below. In this code there is a textarea and a button element.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Textarea Value using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <textarea id="main" rows="10" cols="100"></textarea>
    <br>
    <button>Click Me</button>
</body> 
</html>

JQuery Code

JQuery Code is given below. JQuery val() method is used for this purpose which returns or sets the value of html element.

In this example whenever button is clicked a function is executed which will set the textarea tag value using the val() method of JQuery.

<script>
$(document).ready(function(){
  var text = "Subscribe HowToCodeSchool Youtube Channel! :)";
  $("button").click(function(){
  $("#main").val(text);
  });
});
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on how to Set Textarea Value using JQuery.