JQuery | Set the value of an input text field

There is a Input Element, the task is to set its value using JQuery. Here are a few examples discussed.
To understand example first few methods to know.
JQuery val() method:
This method return/set the value attribute of selected elements.
If we use this method to return value, it will return the value of the FIRST selected element.
If we use this method to set value, it will set one or more than one value attribute for set of selected elements.
Syntax:

  • Return the value attribute:

    $(selector).val()
    
  • Set the value attribute:



    $(selector).val(value)
    
  • Set the value attribute using function:

    $(selector).val(function(index, curValue))
    

Parameters:

  • value:This parameter is required. It specifies the value of value attribute.
  • function(index, currentValue):This parameter is optional. It specifies the function that returns the value to set.

    • index: It returns the position of index of element in set.
    • currentValue: It returns the current value attribute of the selected elements.

Example 1: In this example the value of the input element is set by val() method by selecting the input element from its ID.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery | Set value of input text.
    </title>
    <script src=
    </script>
  
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">  
             GeeksForGeeks  
        </h1> Input Box:
    <input id="input" 
           type="text" 
           class="Disable" 
           value="" />
    <br>
    <br>
    <button id="setText">
        setText
    </button>
    <script>
        $("#setText").click(function(event) {
            $('#input').val("GeeksForGeeks");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: In this example the value of the input element is set by val() method by selecting the input element from its parent element < body > and then selecting the < input > element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JQuery 
      | Set value of input text.
    </title>
    <script src=
    </script>
  
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">  
             GeeksForGeeks  
        </h1> Input Box:
    <input id="input"
           type="text" 
           class="Disable"
           value="" />
    <br>
    <br>
    <button id="setText">
        setText
    </button>
    <script>
        $("#setText").click(
          function(event) {
            $('body input').val(
              "GeeksForGeeks");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.