How to Set Input Value in jQuery

Use jQuery’s val() method to set an input’s value, read its current value, or derive a new value from the old one. Select the intended input and call .val("new value") to update it. The examples below show the setter, callback form, getter, and checks that help avoid common mistakes.

Set an input value with .val()

Call .val(value) on a jQuery selection to assign the value to every matched element. For example, $("#email").val("reader@example.com") sets the value of the input whose ID is email. Replace the selector and string with the ones used by your page. A class selector such as $(".email") can match multiple inputs, so use it only when you intend to set each matched field.

The element must exist when the call runs. Put the call in a ready handler, such as $(function () { ... }), or load the script after the relevant form markup. If the selector matches no elements, there is nothing to update; check the selector and the element’s ID or class when the value appears unchanged.

Use a callback to update input values

Pass a function to .val() when the new value depends on each input’s current value. jQuery calls the function for each matched element and supplies its zero-based position and current value as arguments. Return the value to assign; the arguments are inputs to the callback, not values it returns automatically. This is useful for transforming several fields without reading and setting them in separate steps.

For example, this callback logic returns uppercase text from the current value. It is a standalone JavaScript illustration of the transformation; in a page, pass the callback to .val() on the selected inputs:

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

const updatedValue = uppercaseValue(0, "delft");

To preserve the common uppercase-on-blur behavior, bind a blur handler and use $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); }) inside it. When the user leaves the field, the callback’s returned string replaces that field’s value. The index parameter can be omitted when it is not needed.

Read an input value with .val()

Call .val() with no argument to read the value of the first element in the selection. For example, const email = $("#email").val(); stores the current value so your code can check it or use it elsewhere. If a selector matches several elements, the getter still reads only the first one; use a per-element operation when you need every value.

A value read from an input is a string. Convert it explicitly if later logic needs a number, and account for the text the user actually entered. The getter reports the current field value, which may have changed since the page loaded.

Common checks when setting input values

• Confirm the selector: verify that its ID, class, or other selector matches the intended input. A selector that matches multiple fields updates all of them.
• Check timing: run the setter after the input exists, for example in a jQuery ready handler or after the form markup.
• Check the value source: if using a callback, return the transformed string. The callback receives the element index and current value in that order.
• Handle events separately: setting a value with .val() does not itself dispatch a change event. If other code must respond to the programmatic update, trigger the needed event explicitly, for example with .trigger("change"), after setting the value.
• Distinguish display from submission: .val() changes the control’s current value; it does not update unrelated page text or guarantee that the field will be included in a form submission. Check that the input is enabled and belongs to the form when submission behavior matters.