JQuery Set the Value of an Input Text Field

Last Updated : 08 Oct, 2024

Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are – val(), prop(), and attr(). These method offers unique capabilities for setting the value of an input text fields.

Table of Content

Let us now discuss all of these methods one by one in detail with the help of code examples.

Set the Value of an Input Text Field using jQuery val() Method

The jQuery val() method is used to set or return the value of an input text field. To set a value to an input field, simply pass the desired value as a string within the method. This approach is quick and effective for updating input fields dynamically.

Syntax

$(selector).val("value_to_be_set")

Example: Setting the value of an input text field using val() method by selecting the input element using its ID.

html

<!DOCTYPE HTML> <html>  <head>     <title>         Set the Value of an Input Field using jQuery     </title>     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>  </head>  <body>     <h1>GeeksforGeeks</h1>      <label>Input Box:</label>     <input type="text" value="" id="inputField" />     <br><br>      <button id="setText">         Set Value to Input Field     </button>      <script>         $("#setText").click(function(event) {              $('#inputField').val("Welcome Geeks!");          });      </script> </body>  </html>

Output

Set the Value of an Input Text Field using jQuery prop() Method

The prop() method is another way to set the value of an input field. This method is primarily used for properties like checked, disabled, or selected, but it can also be used to set the value property of an input field.

Syntax

$('selector').prop("value", "value_to_be_set");

Example: This example explains the use of the prop() method to set the value of an input text field.

html

<!DOCTYPE HTML> <html>  <head>     <title>         Set the Value of an Input          Field using jQuery     </title>     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>  </head>  <body>     <h1>GeeksforGeeks</h1>      <label>Input Box:</label>     <input type="text" value="" id="inputField" />     <br><br>      <button id="setText">         Set Value to Input Field     </button>      <script>         $("#setText").click(function(event) {              $('#inputField').prop("value", "Welcome Geeks!");          });      </script> </body>  </html>

Output

Set the Value of an Input Text Field using jQuery attr() Method

The attr() method can also be used to set the value of an input field. Though it is generally used for setting attributes like id, class, and src, it can also modify the value attribute of input elements.

Syntax:

 $('selector').attr("value", "value_to_be_set");

Example: This example implements the attr() method to set the value of an input text field.

HTML

<!DOCTYPE HTML> <html>  <head>     <title>         Set the Value of an Input         Field using jQuery     </title>     <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script>  </head>  <body style="margin: 50px 0 0 50px;">     <h1>GeeksforGeeks</h1>      <label>Input Box:</label>     <input type="text" value="" id="inputField" />     <br><br>      <button id="setText">         Set Value to Input Field     </button>      <script>         $("#setText").click(function(event) {             $('#inputField').attr("value", "Welcome Geeks!");          });      </script> </body>  </html>

Output

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document. It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

How to get the value of a textarea in jQuery ?

PranchalKatiyar

Improve

Article Tags :

JQuery Set the Value of an Input Text Field

Set the Value of an Input Text Field using jQuery val() Method

Syntax

Set the Value of an Input Text Field using jQuery prop() Method

Syntax

Set the Value of an Input Text Field using jQuery attr() Method

Similar Reads