jQuery .val() Method

What You’ll Learn

The .val() method gets or sets the current value of form elements. This tutorial covers getter and setter overloads (value and callback since 1.4), single and multi-select arrays, comparisons with .prop('value') and .attr('value'), the change event caveat, and five official jQuery demos.

Introduction

Forms are everywhere on the web — login boxes, search bars, dropdown menus, and comment fields. When JavaScript needs to read what the user typed or programmatically fill in a field, jQuery provides .val().

Available since jQuery 1.0, .val() is the dedicated API for form element values on input, textarea, and select elements. It handles edge cases that raw property access misses — especially multi-select dropdowns that return an array of selected option values.

Use .prop() for boolean form state like checked and disabled, and .val() for the text or option value the user sees and submits. After setting a value, call .trigger("change") if you need change event handlers to run.

Understanding the .val() Method

As a getter, .val() returns the current value of the first matched element — a string for text inputs, a number in some cases, or an array for multi-select elements. On an empty jQuery collection it returns undefined.

As a setter, .val(value) or .val(function) sets the value on every matched element and returns the jQuery object for chaining. Passing an array checks or selects matching options, checkboxes, and radio buttons inside a form.

📝 Syntax

jQuery .val() supports three forms:

Get value — since 1.0

.val()

• Returns the value of the first matched element.
• Multi-select returns an array; empty collection returns undefined.

Set value — since 1.0

.val( value )

• value — string, number, or array of strings for multi-select / checkbox groups.
• Sets the value on every matched element.

Callback setter — since 1.4

.val( function( index, currentValue ) {
  return currentValue.toUpperCase();
})

Return values

• Getter: String, Number, Array, or undefined.
• Setter: the original jQuery object (for chaining).

NOTE: change event is not fired

Setting a value with .val() does not dispatch the change event. Trigger it manually when needed:

$( "#country" ).val( "US" ).trigger( "change" );

Reading checked inputs and selects

$( "select#foo option:checked" ).val();
$( "select#foo" ).val();
$( "input[type=checkbox][name=bar]:checked" ).val();
$( "input[type=radio][name=baz]:checked" ).val();

Examples Gallery

Examples 1–5 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

function displayVals() {
  var singleValues = $( "#single" ).val();
  var multipleValues = $( "#multiple" ).val() || [];
  $( "p" ).html(
    "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " )
  );
}
$( "select" ).on( "change", displayVals );
displayVals();

Single: Single2
Multiple: Multiple2, Multiple3



Multi-select .val() returns an array of selected option values

$( "input" )
  .on( "keyup", function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  } )
  .trigger( "keyup" );

Paragraph mirrors input text on every keystroke
Initial trigger shows starting value immediately

$( "button" ).on( "click", function() {
  var text = $( this ).text();
  $( "input" ).val( text );
});

Click "Feed the Input" → input shows "Feed the Input"
Setter applies to every matched input in the collection

$( "input" ).on( "blur", function() {
  $( this ).val( function( i, val ) {
    return val.toUpperCase();
  });
});

Type "hello" and blur → field shows "HELLO"
Callback receives index and current value per element

$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input" ).val([ "check1", "check2", "radio1" ]);

Single2 selected; Multiple2 and Multiple3 checked
check1 and check2 checked; radio1 selected



Array setter matches value attributes across input types

🚀 Common Use Cases

• Read search query — var q = $("#search").val() before Ajax lookup.
• Clear form on reset — $("form input, form textarea").val("").
• Pre-fill edit forms — $("#title").val(record.title) after loading JSON.
• Populate dropdown from API — build options, then $("#country").val(user.country).
• Trim on submit — $("input").val(function(i,v){ return v.trim(); }).
• Serialize companion — pair with .serialize(); both read current .val() state.

📝 Notes

• Available since jQuery 1.0 — callback setter since 1.4.
• Getter reads the first element only; setter updates every match.
• Multi-select returns an array; jQuery 3.0+ returns [] when nothing is selected.
• Setting .val() does not fire change — call .trigger("change") when needed.
• Prefer .val() over .prop("value") for form text and select options.
• Use .prop("checked") for boolean checked state, not .val() alone.
• On empty collections, getter returns undefined.

💡 Best Practices