.val()?.val() (since 1.0) gets or sets the current value of form elements — mainly input, select, and textarea. Prefer it over .prop("value") for form text and selection.
// Get
var name = $("#name").val();
var picks = $("#multi").val(); // array for multi-select
// Set
$("#name").val("Ada");
$("#multi").val(["a", "c"]);
// Callback (since 1.4)
$("input").val(function (i, v) {
return v.trim();
});| Need | Use |
|---|---|
| Form field value | .val() |
| Live checked / disabled | .prop() |
| HTML attribute (markup) | .attr() |
| Serialize a whole form | .serialize() |
| Listen for user edits | .on("change") |
.val()Select the field, then get, set, or compute the value.
.val() — first match only; empty set → undefined..val(value) — string, number, or array for multi-select / checks..val(function (index, old) { return next; }) (since 1.4)..trigger("change") after setting.| Signature | Since | Role |
|---|---|---|
.val() | 1.0 | Get value of first element |
.val(value) | 1.0 | Set value on every match |
.val(fn) | 1.4 | Set from function(index, oldValue) |
| Multi-select get | — | Array of values · [] if none (jQuery 3.0+) |
if called as .val():
if no matched elements: return undefined
if first element is multi-select:
return array of selected option values
// jQuery 3.0+: [] when nothing selected
else:
return that element's current value
if called as .val(value):
for each matched element:
set its value / selected / checked state from value
// does NOT fire change — call .trigger("change") if needed
if called as .val(fn):
for each matched element with index i:
set value to fn(i, currentValue)Keep these facts handy while reading form values.
| Topic | Detail |
|---|---|
| Primary use | input, select, textarea |
| Getter scope | First element only |
| Empty collection | undefined |
| Multi-select (3.0+) | Array · empty → [] |
| Set + events | No auto change — use .trigger("change") |
| Array setter | Selects options / checks matching values |
vs .prop("value") | Prefer .val() for forms |
| Checked state | Use .prop("checked"), not .val() |
Get or set the sample input value — same APIs as the examples below.
Short, copy-ready snippets. Prefer .val() for form values.
Mirror whatever the user types — official getter pattern.
$("input").on("keyup", function () {
var value = $(this).val();
$("p").text(value);
}).trigger("keyup");keyup.$(this).val() reads the current field value..trigger("keyup") shows the initial value.Pass a string to update every matched input.
$("button").on("click", function () {
var text = $(this).text();
$("input").val(text);
});.text().$("input").val(text) writes that string.change fires unless you trigger it.Single select returns a string; multi-select returns an array.
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("#out").text(
"Single: " + singleValues +
" | Multiple: " + multipleValues.join(", ")
);
}
$("select").on("change", displayVals);
displayVals();.val() returns the selected option value.[] (older jQuery used null).|| [] keeps older jQuery safe when joining.Compute the new value from the old one — e.g. uppercase on blur.
$("input").on("blur", function () {
$(this).val(function (i, val) {
return val.toUpperCase();
});
});.val().Pass matching values to select options or check controls in one call.
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1", "check2", "radio1"]);
$("#out").text(
"single=" + $("#single").val() +
", multi=" + $("#multiple").val().join(",")
);values to check or select.change event.These trip up beginners most often with form values.
.val() does not fire changeProgrammatic sets skip handlers. Chain .trigger("change") when needed.
jQuery 3.0+ returns []; older versions returned null. Use || [] when supporting both.
.val() ≠ checked stateUse .prop("checked") or :checked to test whether a box is on. .val() returns the value attribute.
Browsers may strip \r from textarea .val(). A $.valHooks.textarea can normalize if you need CRLF.
.val() has been part of jQuery since 1.0. Callback setter since 1.4. Multi-select empty result is [] since 3.0. Works wherever your loaded jQuery build runs.
Universal across browsers that run your jQuery version. Prefer current jQuery 3.x+ for consistent multi-select empty arrays.
Bottom line: Safe for everyday forms. Prefer .val() for field values; use .prop() for live checked/disabled state.
| Approach | Cost | Best for |
|---|---|---|
One .val() get/set | Cheap | Typical form UI |
| Array set on a small group | Cheap | Multi-select / checkbox groups |
| Reading every keystroke on huge pages | Watch | Debounce or target one field |
Value access is inexpensive. Keep handlers focused on the fields you need — avoid scanning the whole document on every keyup.
[] in jQuery 3.0+.change — trigger it yourself..prop("checked") for on/off, not .val().One line: .val() is jQuery’s form-value API — get/set text and selections, then trigger change only when you need it.
Learn how to strip HTML attributes from matched elements.
14 people found this page helpful