How to Set Textbox Value Dynamically in Jquery

January 4, 2022
Jquery
How to Set Textbox Value Dynamically in Jquery

In this guide, you will learn how to set or change the textbox value dynamically in Jquery.

It’s very common that in the form you have textbox and you need to set its value dynamically.

Create QR code generator in JavaScr...
Create QR code generator in JavaScript

Let’s get started!

Step 1: Create the textarea field

Create the new textarea field in body tag of the html. I have given it an id of textfield.

<textarea name="" id="textfield" cols="30" rows="10"></textarea>

Step 2: Include the jquery

After the body tag, include the jquery CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
">
</script>

Step 3: Set the value of textarea

After the include of jquery, add the following code:

$('#textfield').val('This is the value of textarea');

In the above code #textfield is the id of the textarea and we are setting its value to “This is the value of textarea”.

Full Code:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <textarea name="" id="textfield" cols="30" rows="10"></textarea>

  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
"></script>
  <script>
    $('#textfield').val('This is the value');

  </script>

</html>

Conclusion:

Hope you have learned today how to set or change the textarea value dynamically in jquery.

Let me know if you have any comments.

See you in the next guide.

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


Icon