What is jquery val() method ?
It is used to change the value of the selected elements.
val() method modifies the value of the selected element.
val() method is used to set and also return the values.
This is can be executed in three forms for the selected elements.
1. Retuning the value.
2. Setting the new value.
3. Calling function inside the method.
What is the syntax of val() method ?
$(selector).val()
$(selector).val(value)
$(selector).val(function(index,currentvalue))
selector – this is the html element.
val() – this is an inbuilt jquery method
value – It is a mandatory parameter which specifies the new value to be applied for the selected elements.
function(index, currentvalue) – It is an optional parameter which specifies a function returns the old/existing value for the selected elements.
index – This returns the index position of the element in the set.
currentvalue – It returns the current value of the selected element.
Jquery tutorial for beginners !!!
Click to Learn More about – online learn jquery
1. $(selector).val()
Example :
This empty val() method returns the existing/old value of the first matched element.
This alerts the predefined/existing value.
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:150px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
alert($("#fname").val());
});
$(".b2").click(function(){
alert($("#lname").val());
});
});
</script>
</head>
<body>
<div id="dId-1">
<p>FirstName :<input id="fname" type="text" name="user" value="FirstName"></p>
<p>LastName :<input id="lname" type="text" name="user" value="LastName"></p>
</div>
<div id="dId-2">
<p>
<button class="b1">Val</button> val() Method for FirstName.
</p>
<p>
<button class="b2">Val</button> val() Method for LastName.
</p>
<div>
</body>
</html>
Output :
Getting existing content
2. $(selector).val(value)
This method is used to set new value for the selected elements.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:150px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$("#fname").val("Abdul");
});
$(".b2").click(function(){
$("#lname").val("Kalaam");
});
});
</script>
</head>
<body>
<div id="dId-1">
<p>FirstName :<input id="fname" type="text" name="user" value="FirstName"></p>
<p>LastName :<input id="lname" type="text" name="user" value="LastName"></p>
</div>
<div id="dId-2">
<p>
<button class="b1">Val</button> val() Method for FirstName.
</p>
<p>
<button class="b2">Val</button> val() Method for LastName.
</p>
<div>
</body>
</html>
Output :
1. before calling val() method for FirstName and LastName.
2. after calling val() method for FirstName and LastName.
Setting the FirstName and LastName as “Abdul” “Kalaam”.
3 $(selector).html(function(index,currentvalue))
This is an optional parameter.
index – This returns the index position of the element in the set.
currentvalue – It returns the current value of the selected element.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Our title</title>
<style>
#dId-1{
width: 30%;
height: 30%;
text-align:center;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 20px;
}
#dId-2{
width: 30%;
height: 30%;
text-align:center;
margin: 10px;
border: 2px solid green;
padding: 20px;
font-size: 20px;
}
.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
width:150px;
height:30px;
font-size: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".b1").click(function(){
$("#fname").val(function(n){
return alert($("#fname").val());
});
});
$(".b2").click(function(){
$("#lname").val(function(n){
return alert($("#lname").val());
});
});
});
</script>
</head>
<body>
<div id="dId-1">
<p>FirstName :<input id="fname" type="text" name="user" value="FirstName"></p>
<p>LastName :<input id="lname" type="text" name="user" value="LastName"></p>
</div>
<div id="dId-2">
<p>
<button class="b1">Val</button> val() Method for FirstName.
</p>
<p>
<button class="b2">Val</button> val() Method for LastName.
</p>
<div>
</body>
</html>
Output :
1. Before calling val() method for FirstName and LastName.
1. After calling val() method for FirstName and LastName.
