JQuery | Set the value of an input text field - GeeksforGeeks

03 Aug, 2021
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()

$(selector).val()

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

$(selector).val(value)

Set the value attribute using function:$(selector).val(function(index, curValue))

$(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.
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.
<!DOCTYPE HTML><html>  <head>    <title>        JQuery | Set value of input text.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </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>
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.
<!DOCTYPE HTML><html>  <head>    <title>        JQuery       | Set value of input text.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </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>
Output:
Before clicking on the button:
After clicking on the button:
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.
jQuery-Basics
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills