jQuery .val(): Read and Set Form Field Values

jQuery Reference

.val() reads or sets the current value of an input, select, or textarea. A getter reads only the first matched field, while a setter updates every matched field.

Syntax and behavior

const name = $("#name").val();
$("#name").val("Alex Kim");
$("#topics").val(["html", "css"]);

Ordinary fields return strings. A select with the multiple attribute returns an array of selected option values; since jQuery 3.0, no selection returns an empty array. An empty jQuery collection returns undefined. A checkbox’s value is not its checked state: inspect .prop("checked") or select only :checked elements when that distinction matters.

The official jQuery .val() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery val example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<label for="name">Name</label><input id="name" value="Initial name">
<label for="topics">Topics</label>
<select id="topics" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="jquery">jQuery</option>
</select>
<button id="fill" type="button">Set values</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#name, #topics").on("change", function () {
        $("#output").text("Name: " + $("#name").val() + " / Topics: " + JSON.stringify($("#topics").val()));
      });
      $("#fill").on("click", function () {
        $("#name").val("Alex Kim");
        $("#topics").val(["html", "css"]).trigger("change");
      });
    });
  </script>
</body>
</html>

Expected result

Clicking Set values changes the name to Alex Kim and selects HTML and CSS. The output reads Name: Alex Kim / Topics: ["html","css"]. Calling .trigger("change") runs the handler that displays those values.

Trimming a field value

$("#name").val(function (index, value) {
  return value.trim();
});

The callback receives each field’s index and current value and returns a replacement. Avoid applying this indiscriminately to fields such as passwords, where spaces may be meaningful.

Important details and troubleshooting

Setting a value with .val(value) does not automatically dispatch a change event. Trigger it explicitly if the required follow-up behavior is registered as a change handler.
To collect several checked checkbox values, select :checked elements and use .map(function () { return this.value; }).get(). Calling .val() on a collection still reads only the first element.
A numeric-looking input value can still be a string. Convert it with Number() or a suitable parser and check empty or invalid input before calculating.
A placeholder is not a value. Use .val("") to clear a field. The initial HTML value attribute can differ from the value edited by the user.

Compare the behavior with .attr() and HTML attributes.

jQuery Reference

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery .slideDown(): Expand and Show Hidden Content

Reveal a hidden panel and handle its initial state, animation queue, callbacks, reset behavior, and reduced motion.

jQuery .val(): Read and Set Form Field Values

Read and set current field values and multiple selections, and handle change events separately from value assignment.

jQuery .has(): Select Elements with Matching Descendants

Filter the original selection by matching descendants, and see why has and find return different elements.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .wrapAll(): Put Selected Elements in One Wrapper

Collect selected elements into one wrapper and inspect how separated siblings move, including the limits of unwrapping.

jQuery .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.

jQuery .css(): Read, Set, and Clear Styles

Read computed styles, set and clear inline properties, and handle CSS units and numeric values in jQuery 4.0.

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.