The jQuery Val method is the most used method which either returns or sets the value attribute of the selected elements.
For Returning Value – It returns the first matched element’s value attribute.
For Setting Value – It sets the value of all matched elements.
jQuery Val Syntax
The .val() method has 3 syntaxes.
1. For Returning Value
1
| $(selector).val() |
2. For Setting Value
1
| $(selector).val("Hello") |
3. For Setting Value through a Function
1
| $(selector).val(function(index,currentvalue)) |
- index: returns the index of the element in the set.
- currentvalue: returns the current value of the element in the set.
I will show how to use the function in the examples below.
jQuery Val Example 1: Set value of textbox
I have one textbox and a button. On the button click the value of the textbox is set as ‘Hi’.
This code is shown below.
1
2
3
4
5
| <input type="text" id="text1" value="Welcome" /><button id="button1">Set 'Hi'</button>$("#button1").click(function (e) { $("#text1").val("Hi");}); |
jQuery Val Example 2: Set value of textbox using function
This time my text box has initial value as ‘jQuery’, I will add ‘Hi’ to this value using .val() function parameter.
The button click event will set value of textbox as ‘jQuery Hi’.
1
2
3
4
5
6
7
8
| <input type="text" id="text2" value="jQuery" /><button id="button2">Set 'jQuery Hi'</button>$("#button2").click(function (e) { $("#text2").val(function (index, currentvalue) { return currentvalue + " Hi"; });}); |
jQuery Val Example 3: Get value of textbox
The below code alert the value of the textbox on the button click event.
1
2
3
4
5
| <input type="text" id="text3" value="Hello Coder!" /><button id="button3">Get Value</button>$("#button3").click(function (e) { alert($("#text3").val());}); |
Example 4: Get selected value of dropdown
Just like textboxes jQuery Val method can also get the selected value of drop downs.
1
2
3
4
5
6
7
8
9
| <select id="select1"> <option value="First">First</option> <option value="Second">Second</option> <option value="Third">Third</option></select><button id="button4">Get Value</button>$("#button4").click(function (e) { alert($("#select1").val());}); |
In the above code you select the second value of drop down, and then click the button.
The alert box will show ‘Second’.
Example 5: Set value of Checkboxes
I have 2 checkboxes here and a button. One the button click both the checkboxes will be checked.
1
2
3
4
5
6
7
| <input type="checkbox" value="check1"> check1<input type="checkbox" value="check2"> check2<button id="button5">Set</button>$("#button5").click(function (e) { $("input[type='checkbox']").val(["check1", "check2"])}); |
In the above code I have passed multiple value to the jQuery .val() method.
