Textarea is an essential part of a form on websites. There are many use cases where you need textarea in forms like the contact us page, feedback page, or a simple chat UI. This example explains how to set data/content or value of a textarea input field.
How to Change Data or Value of a Text Area
There is no need to use jQuery or other libraries like Alpine JS just to change the value of a textarea input. You can use vanilla JS for this purpose. The following example explains how you can change the value of textarea with vanilla JavaScript.
|
1 2 3 4 5 6 7 8 9 |
const button = document.querySelector("#button"); const messageBox = document.querySelector("#message"); button.addEventListener("click", ()=>{ messageBox.value = "Please type your message here." }); |
|
1 2 3 4 5 6 |
<textarea id="message"></textarea> <button id="button">Click to Change</button> |
You can check the working example that will look like the following screenshot.
In the example above, you will be able to change the textarea content after clicking on the button.
Conclusion
A simple code snippet of vanilla JavaScript is enough to change the textarea value instead of using jQuery or another library. You can easily update the value of a textarea input with JavaScript .value method.