Skip to content
3 demos of jQuery val to get or set values
In This Tutorial
What is the jQuery val method?
The $.val method in jQuery is used to set or get the value of the specified element.
If you use it to get the value of an element and there are multiple occurrences of that element, it will return first matched element values only.
See example of val to get value
If you are using the $.val to set the value and there are multiple occurrences of matched elements then it will set values of all matched elements.
See example of val to set value
Generally, this method is used to retrieve the values form elements like text boxes, select-option dropdown, textarea etc.
The examples below will show you how to get and set values by using jQuery val method, first let us have a look at the syntax of val() method.
Syntax of val method
The basic syntax of val method to get value is:
$(“element”).val();
The syntax to set value is:
$(“element”).val(“Value to set”);
Example of getting select option dropdown value using val
The following example shows how to get the value of select-option dropdown. We have a dropdown with a few color options. As you select a color and click on the button “Show selected option value”, an alert will show the value of selected option.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#showval”).click(function(){
alert ($(“#selcolor”).val());
});
});
</script>
</head>
<body>
<select id=“selcolor”>
<option value=“Bl”>Black</option>
<option value=“Wh”>White</option>
<option value=“Re”>Red</option>
<option value=“Ye”>Yellow</option>
<option value=“Or”>Orange</option>
</select>
<button id=“showval”>Show selected option value</button>
</body>
</html>
|
Example of getting textbox value by val
The example below shows getting the value of a text box. Enter any text into the given text box and press “Show value” button. It will show an alert with the entered text.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#showval”).click(function(){
alert ($(“#showvaltxt”).val());
});
});
</script>
</head>
<body>
<input type=“text” id=“showvaltxt” value=“Enter some text here”/>
<button id=“showval”>Show value</button>
</body>
</html>
|
Example of setting value with jQuery val method
The following example shows how to set the value by using the val jQuery method.
For this example, we will use input boxes. At page loading, the $.val method is used to set the values. If you click on the button, a new value will be set in the input boxes.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“input”).val(“Value set with jquery set method”);
$(“#showval”).click(function(){
$(“input”).val(“set text”);
});
});
</script>
</head>
<body>
<input />
<input />
<button id=“showval”>Set value</button>
</body>
</html>
|
Useful reading jQuery slide | jQuery hover
Leave A Comment?