Programming

jQuery val

July 15, 2021

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.

 using (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

Example #1 – jQuery val () Method without Parameters

Next, we write the html code to understand the 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>

Example #2 – jQuery val() Method Single Select Boxes

Next example code where this method is used to get the form’s elements values. The 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>

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>

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>

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>

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 –

  1. $(selector).val( )
  2. (selector).val( value )
  3. $(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.

We hope you like our post about jQuery if you are interested in learning more about programming and ready to dive deep in the world of programming don’t forget to check out mcp


  • Recent Posts



shares
Loading...