jQuery | val() with Examples

07 Jan, 2022
The val() method is an inbuilt method in jQuery which is used to returns or set the value of attribute for the selected elements. This method apply on the HTML form elements.Syntax: There are three ways to use this method which are given below:  
$(selector).val()
Parameters: This method does not accepts any parameters.
$(selector).val(value)
Parameters: This method accepts single parameter value which is mandatory. It is used to specify the value of attributes.
$(selector).val(function(index,current_value))
Parameters: This method accepts single parameter function which is optional. It contains index position of element and current value attribute of selected element.
Return Value: This method returns the selected element with specified changes made by val() method.Below examples illustrates the val() method in jQuery:Example 1:  
html
<!DOCTYPE html><html>    <head>        <title>The val Method</title>        <script src=        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </script>                 <!-- jQuery code to show the working of this method -->        <script>            $(document).ready(function() {                $("button").click(function() {                    $("input:text").val("GeeksforGeeks!");                    $("input:text").css("color", "green");                    $("input:text").css("font-size", "40px");                    $("input:text").css("font-weight", "bold");                    $("input:text").css("font-family", "times new roman");                });            });        </script>        <style>            div {                background-color: lightgreen;                padding: 20px;                width: 41%;                min-height: 150px;                border: 2px solid green;            }                          input {                border: 2px solid green;                padding-left: 15px;                width: 350px;                height: 80px;            }        </style>    </head>    <body>        <div>            <p>                <input type="text" name="user">            </p>            <!-- click on this paragraph and see the change -->            <button>Click Here!</button>        </div>    </body></html>
Output:  
Example 2: This method takes two value first one for index position and second one for value of the attribute. No need to pass the index position, the function will automatically set to null (n = 0) and “c” specifies the current value of the input field.  
html
<!DOCTYPE html><html>    <head>        <title>The val Method</title>        <script src=        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </script>                 <!-- jQuery code to show the working of this method -->        <script>            $(document).ready(function() {                $("button").click(function() {                    $("input:text").val(function(n, c) {                        return c + " GeeksforGeeks!";                    });                });            });        </script>        <style>            div {                background-color: lightgreen;                padding: 20px;                width: 300px;                height: 80px;                border: 2px solid green;            }                          input {                border: 2px solid green;                padding-left: 15px;                width: 220px;                font-weight: bold;                height: 30px;            }        </style>    </head>          <body>        <div>            <p>                <input type="text" name="user" value="Welcome To">            </p>            <!-- click on this paragraph and see the change -->            <button>Click Here!</button>        </div>    </body></html>
Output: Before click on the button:  
After click on the button:  
 
surinderdawra388
jQuery-HTML/CSS
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
jQuery | children() with Examples