jQuery val() Method

Quiz

The val() method in jQuery is used to get or set the value of HTML form elements.

Following is the functionality of the val() method −

get: When called without any arguments, it retrieves the current value of the first element in the set of matched elements.
set: When called with an argument, it sets the value of each element in the set of matched elements to the specified value.
function: When called with a function as an argument, it sets the value using the return value of the function, which receives the index of the element and the current value as arguments.

Syntax

We have different syntaxes to âgetâ and âsetâ the value attribute of the selected elements −

Following is the syntax to get the value attribute:

$(selector).val()

Following is the syntax to set the value attribute:

$(selector).val(value)

Following is the syntax to to set the value attribute using a function:

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

Parameters

This method accepts the following parameters −

value: The new value to set for the selected element(s).
currentValue (optional): A callback function used to set the value.

index: The position of the element in the set of matched elements.
currentValue: The current value of the element before setting the new value.

Example 1

In the following example, we are using the val() method to return the value of the <input> field −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                alert('The value is: ' + $('#myInput').val());
            });
        });
    </script>
</head>
<body>
    <input type="text" id="myInput" value="Tutorialspoint...">
    <button>Get Value</button>
</body>
</html>

After clicking the button, the value of the text input field (âTutorialspointâ) will be retrieved.

Example 2

In this example, we are setting a new value to the text input field using the val() method −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('#myInput').val('New Value...');
            });
        });
    </script>
</head>
<body>
    <input type="text" id="myInput" value="Old value">
    <button>Get Value</button>
</body>
</html>

The new value for the input text field will be added when we click the button.

Example 3

Here, we provide the function parameter of the val() method to set the value of a text input field based on its current value −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('#myInput').val(function(index, currentValue) {
                    return currentValue + ' updated';
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="myInput" value="Initial value">
    <button>Update Value</button>
</body>
</html>

After clicking the button, the val() method appends "updated" to the current value of the input field.

jquery_ref_html.htm

Print Page