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 .appendTo(): Insert Content as the Last Child

Start with the content to insert it at a destination’s end, and inspect the returned selection and moving or cloning behavior.

jQuery .toggleClass(): Toggle a Class or Set Its State

Distinguish reversing a class from setting a known Boolean state, with a toggle-button example and current syntax.

jQuery .addBack(): Include the Previous Traversal Selection

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

jQuery .empty(): Clear Content and Keep the Container

Clear a container’s elements and text without deleting it, refill it, and understand how field values and event handlers differ.

jQuery .width(): Measure and Set Content Width

Compare content, padding, and border widths, and verify how width getters and setters behave with border-box sizing.

jQuery .slideUp(): Collapse and Hide Content

Collapse a panel with duration, easing, and completion handling, including queued effects, reset behavior, and reduced motion.

jQuery .attr(): Read and Set HTML Attributes

Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.

jQuery .has(): Select Elements with Matching Descendants

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

jQuery .slideToggle(): Toggle a Collapsible Panel

Build a collapsible panel with a state-aware button, animation queue control, and collection-wide completion handling.

jQuery .wrap(): Wrap Each Element Separately

Give each selected element its own wrapper, check the returned selection, and avoid duplicate IDs or repeated nesting.