jQuery val() Method

Last Updated : 10 Jul, 2023

The val() method is an inbuilt method in jQuery that is used to return or set the value of attributes for the selected elements. This method applies to the HTML form elements.

Syntax: There are three ways to use this method which are given below:

$(selector).val()

Parameters: This method does not accept any parameters.

$(selector).val(value)

Parameters: This method accepts a 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 a single parameter function which is optional. It contains the index position of the element and the current value attribute of the selected element.

Return Value: This method returns the selected element with specified changes made by val() method.

The below examples illustrate 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 values first one for index position and the second one for the value of the attribute. No need to pass the index position, the function will automatically be set to null (n = 0), and “c” specifies the current value of the input field.

jquery-42

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:

jquery-43

jQuery width() Method

kundankumarjha

Improve

Article Tags :

jQuery val() Method

html

html

Similar Reads