jQuery Val Method – .val() – Complete Usage Guide with Codes

jQuery Val Method – .val() – Complete Usage Guide with Codes

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 attribute’s value.

For Setting Value – It sets the value of all matched elements.

jQuery Val Syntax

The .val() method has 3 syntaxes.

1. For Returning Value


2. For Setting Value


3. For Setting Value through a Function

  • 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.
Related: Developers should also know the related method which is the jQuery html method.

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.

<input type="text" id="text1" value="Welcome" />
<button id="button1">Set 'Hi'</button>
$("#button1").click(function (e) {

jQuery Val Example 2: Set value of textbox using function

This time my text box has initial value as ‘jQuery’, I will append ‘Hi’ to this value by using .val() method.

The button click event will set value of textbox as ‘jQuery Hi’.

<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 alerts the value of the textbox on the button click event.

<input type="text" id="text3" value="Hello Coder!" />
<button id="button3">Get Value</button>
$("#button3").click(function (e) {
Are you working with mouse events then check the jQuery hover event tutorial which is made for beginners like you.

Example 4: Get selected value of dropdown

Just like textboxes, the jQuery Val method can also get the selected value of drop downs.

<select id="select1">
    <option value="First">First</option>
    <option value="Second">Second</option>
    <option value="Third">Third</option>
<button id="button4">Get Value</button>
$("#button4").click(function (e) {

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 and a button. One the button’s click both the checkboxes will be checked.

<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"])

Note that in the above code I have passed multiple value to the jQuery .val() method. Also visit the below 2 links:


Next tutorial – jQuery Text Method – .text() – Complete Usage Guide with Codes

Share this article -



I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee