Updated March 20, 2023
Introduction to jQuery val()
JQuery Val() is a type of method used for the operations related to the values of the elements in an HTML based web page. The two operations where this method can be used are to set the value for a given element or to get the value for a given element. One can also used an already defined and declared function to fetch the element property, for which the val() method can be used to set or get the values. The syntax for this method is ‘$(selector).val()’, where val will have the value as a parameter and sometimes the function details wherever applicable.
Syntax:
$(selector).val()This method is used to get the value of a selected element.
$(selector).val( value )This method is used to set the value of a selected element.
$(selector).val( function ( index, currvalue ) )This method is used to set the value of a selected element by using a function.
Parameters:
- Value: The value parameter is not an optional parameter, which is used to specify the set value of the attribute.
- function ( index, currvalue ): Function ( index, currvalue ) parameter is an optional parameter, which is used to specify the name of a function to execute and return the set value of the attribute.
Examples for the jQuery val()
Below given are the examples of jQuery val():
Example #1 – Without Parameters
Next, we write the html code to understand the jQuery val ( ) method more clearly with the following example where we set the value attribute of the second and third input element with the value content of the first input element –
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery val( ) method </title>
<!-- code to show the jQuery val( ) working method -->
<script>
$(document).ready(function() {
var cont = $("input").val();
$("input").val( cont );
});
</script>
</head>
<body>
<input type = "text" value = "First Input Box value "/> <br/>
<input type = "text" value = "Second Input Box value "/> <br/>
<input type = "submit">
</body>
</html>Output:
So in the above example the second and third <input>html element content is set the value content of the first <input> element.
Example #2 – Single Select Boxes
Next example code where this method is used to get the form’s elements values. The jQuery val( ) method doesn’t accept any arguments and returns an array containing the value of each selected options in a list else returns a NULL value if no option is selected, as in the below code –
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery val( ) method </title>
<!-- code to show the jQuery val( ) working method -->
<style>
b {
color: red;
}
p {
background-color: yellow;
margin: 10px;
}
</style>
</head>
<body>
<p></p>
<select id="fruit">
<option> Apple </option>
<option> Banana </option>
<option> Orange </option>
</select>
<script>
function fruitdisplayVals() {
var fruitValues = $( "#fruit" ).val();
$( "p" ).html( "<b> Fruits: </b> " + fruitValues );
}
$( "select" ).change( fruitdisplayVals );
fruitdisplayVals();
</script>
</body>
</html>Output:
Once we click any option for example orange, the output is –
Example #3 – jQuery val() Method with Single and Multiple Select Boxes
In the next example code, we rewrite the above code for jQuery val() method with single and multiple select boxes –
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery val( ) method </title>
<!-- code to show the jQuery val( ) working method -->
<style>
b {
color: red;
}
p {
background-color: yellow;
margin: 4px;
}
</style>
</head>
<body>
<p></p>
<select id="fruit">
<option> Apple </option>
<option> Banana </option>
<option> Orange </option>
</select>
<select id="veg" multiple="Vegetables">
<option selected="selected"> Broccoli </option>
<option> Corn </option>
<option> Cucumber </option>
<option> Tomato </option>
</select>
<script>
function fruitdisplayVals() {
var fruitValues = $( "#fruit" ).val();
var vegValues = $( "#veg" ).val() || [];
$( "p" ).html( "<b> Fruits:</b> " + fruitValues +
" <b> Vegetables:</b> " + vegValues.join( ", " ) );
}
$( "select" ).change( fruitdisplayVals );
fruitdisplayVals();
</script>
</body>
</html>Output:
Now we can select any single fruit option and multiple vegetable options, the output is –
Example #4 – jQuery val() Method with Parameter
Next example code where the jQuery wrap( ) method accepts a string to set the value of each matched element. As shown in the below example –
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery val( ) method </title>
<!-- code to show the jQuery val( ) working method -->
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("input:text").val("Set Value");
});
});
</script>
</head>
<body>
<p> Your Name: <input type="text" name="user"></p>
<button id="b1"> Click to set the value of the input field </button>
</body>
</html>Output:
When we click the button, the output is –
Example #5 – jQuery val() Method with Function as Parameter
This method accepts a function as a parameter and sets the value of each matched element.
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery val( ) method </title>
<!-- code to show the jQuery val( ) working method -->
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("input:text").val( function(n,c){
return c+"Set Value";
});
});
});
</script>
</head>
<body>
<p> Your Name: <input type="text" name="user" value= "Welcom to "></p>
<button id="b1"> Click to set the value of the input field </button>
</body>
</html>Output:
When we click the button, the output is –
Conclusion
This method is used to get the value of the html element or to set the value of the html element. Syntax for this are –
- $(selector).val( )
- $(selector).val( value )
- $(selector).val( function ( index, currvalue ) )
Value used to specify the set value of the attribute. function ( index, currvalue ) used to specify the name of a function to execute and return the set value of the attribute.
Recommended Articles
This has been a guide to jQuery val(). Here we discuss the syntax, parameters, and various examples of jQuery val(). You may also have a look at the following articles to learn more –
