How to Set Value of Text Area in jQuery
-
.val()vs.attr() -
Use the
.val()Method to Set Value of thetextarea -
Use the
.attr()Method to Set Value for thetextarea
In JavaScript, we instantiate an instance of the HTML element, id, or class via the querySelector() method. But for the examples in this tutorial, we will use jQuery(#id).
Again, other conventions exist to set values for the text area, like adding proper attributes in the HTML tag, etc. So, we will not focus on the DOM manipulation but rather solve the issue with jQuery.
In today’s tutorial, we will learn the use of .val() and .attr() methods to set the value of the text area in JQuery.
.val() vs .attr()
The .val() method used in jQuery to set the value for input or textarea showcases a string. By default, the text area stays empty, but a line, word, or predefined explanation can give a clear idea of what to do in this scope.
Usually, for most input tags, we find the value attribute to set a default string. But in the case of the textarea tag, there is no value attribute; instead, there is a placeholder attribute. We will now examine the instances representing these solutions in the code segment.
Use the .val() Method to Set Value of the textarea
We will have a fixed dimension text area in our example. Further, we will add an id for it. The task is straightforward; take an instance for that tag with the specified id and apply the .val() method.
Inside the method, pass a string (for example: "This is text area"), or you may store the string in a variable & then pass it. But, first, let’s visualize the code fence.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 1";
$("#txt").val(str);
</script>
</body>
</html>
Output:
As can be seen, in the text area box, the value was set as a string. You might be able to notice that the string is removable. This convention seems a little bit out of date or just not cool enough. So, let’s go for the following example.
Use the .attr() Method to Set Value for the textarea
The .attr() method specifically sets the attribute value for any HTML element. It is the main way to set attributes not along with the DOM elements but rather use them via jQuery or JavaScript as they can be dynamically handled upon choice.
However, here we will set the parameters for the method, and the textarea element has a validated attribute named placeholder. So, we will give the first parameter placeholder, and the second argument will be the value. But, first, let’s check the code lines.
Code Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<title>array loop through</title>
</head>
<body>
<textarea name="txt" id="txt" cols="30" rows="10"></textarea>
<script>
var str = "This is TextArea 2";
$("#txt").attr("placeholder", str);
</script>
</body>
</html>
Output:
And the output depicts that the passed string in the .attr() method was set as the placeholder value. And this is a more integrated and smart view as setting the view of a textarea.
