jQuery is a JavaScript library that provides multiple features and tools to handle the HTML document. To use jQuery, we must include its library in the HTML document using the following code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
In this Answer, we will learn what is val() method in jQuery.
val() methodThe val() method in jQuery is useful whenever we deal with the value of a <form> element. It is used for two purposes:
To get the value of the first element in our selected elements
To set the value of all elements in our selected elements
Let's discuss each purpose of the val() method now.
The val() method helps us get the value of the first element in our selected elements.
Note: If we want to select elements other than the first one within a set of matched elements, we use extensions like :eq(n) or :last to specify the desired element based on its position(n) within the selection.
The syntax to use the val() method for this purpose is the following:
$(selector).val();
selector : It is the element we want to obtain the value of.
Note: When we want to get the first value of an element, we don't use any parameters in the val() method.
The following code demonstrates how we can use the val() method to get the value of the first element in a selected set of elements.
Let's understand our code.
Lines 3–6: We define the document's title and include the jQuery library in the <head> tag.
Lines 8–15: We write the JavaScript code in the <script> tag. The document.ready() function executes after the DOM has loaded completely without making an explicit call. In this function, we call the val() method for our element with class myInput . The first element having this class name will be selected. We set our output text's value to the retrieved value to verify our results.
Lines 17–23: We write our <body> section code. We add three input fields with the class myInput, a button with the id displayBtn, and a paragraph element with the id output.
The val() method helps us set the value of multiple elements which match our selector. There are two ways we can use the method to do so.
Using a value as a parameter
Here we send a value as a parameter, and our selected elements' current value is changed to the newValue we will send as a parameter. The syntax to use the val() method for this purpose is the following:
$(selector).val(newValue);
selector : The element we want to set value for.
newValue : The new value we want to set for all matched elements.
The following code demonstrates how we can use the val() method to set the value of all selected sets of elements.
Let's understand our code.
Lines 10–12: When the button with id displayBtn is clicked, we call the val() method to set the value of all elements with class myInput as newValue which we send as a parameter.
Lines 16–21: We write our <body> section code. We add three input fields with the class myInput, and a button with the id displayBtn.
Here we send a function as a parameter, and our selected elements' current value is changed in the function. We use this way if we want to perform some additional operations or modifications on the current value of our selected elements. Syntax to use the val() method for this purpose is following:
$(selector).val(function(currentIndex, currentValue) {// Performing operations or modifications on currentValuereturn newValue;});
selector : The element we want to set value for.
currentIndex: It is the current index of the element we want to select within the selected set.
currentValue: It is the current value of of the element we want to select within the selected set.
newValue : It is the new value we want to set for our elements. Our val() method sets our element's current value to the returned value.
The following code demonstrates how we can use the val() method to set the value of all selected sets of elements.
Let's understand our code.
Lines 10–15: When the button with id displayBtn is clicked, we call the val() method with a function as a parameter. In this function, we modify the currentValue by appending Modified to it and also including the currentIndex in the resulting string newValue. This newValue is returned by the function which sets our element's value to it.
The val() method in jQuery proves to be a useful tool for working with form elements in web development. It allows us to retrieve and set the values of our form elements effortlessly.
Free Resources