jQuery val() Method

The val() method reads or sets the value of form elements — text inputs, textareas, dropdowns, checkboxes, and radio buttons. It is the most important method for working with form data in jQuery.

Basic Syntax

$(selector).val()         // getter — reads current value
$(selector).val(newValue) // setter — sets a new value

Reading Input Field Values

HTML:
<input type="text" id="username" value="JohnDoe" />

jQuery:
var name = $("#username").val();
// name = "JohnDoe"

This reads whatever the user typed (or the default value) in the input field.

Setting Input Field Values

$("#username").val("NewName");
// The input field now shows "NewName"

Clearing an Input Field

$("#searchBox").val("");
// Input field is cleared — empty string

Reading Textarea Value

HTML:
<textarea id="message"></textarea>

jQuery:
var msg = $("#message").val();
// Returns the full multi-line text typed by user

Reading Dropdown (Select) Value

For a <select> dropdown, val() returns the value attribute of the selected option — not the visible text.

HTML:
<select id="country">
    <option value="IN">India</option>
    <option value="US">United States</option>
    <option value="UK">United Kingdom</option>
</select>

jQuery:
var country = $("#country").val();
// If India is selected → country = "IN"
// If United States is selected → country = "US"

Diagram: val() with Select Dropdown

  Dropdown shows: [India ▼]

  $("#country").val()     → returns "IN"     (the value attribute)
  $("#country option:selected").text()  → returns "India"  (visible text)

Setting a Dropdown's Selected Value

$("#country").val("UK");
// Dropdown now shows "United Kingdom" as the selected option

Reading Checkbox Value

For checkboxes, val() returns the value attribute. To check whether a checkbox is checked or unchecked, use is(":checked").

HTML:
<input type="checkbox" id="agree" value="yes" />

jQuery:
var isChecked = $("#agree").is(":checked");  // true or false
var value = $("#agree").val();               // always "yes" (the value attribute)

Reading Radio Button Value

To get the value of the selected radio button in a group, use a selector that filters for the checked one.

HTML:
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female

jQuery:
var gender = $("input[name='gender']:checked").val();
// Returns "male" or "female" based on which is selected

Diagram: val() Across Form Elements

  Form Element          val() Returns
  ─────────────────────────────────────────────
  Text input            Text typed by user
  Textarea              All text inside it
  Select (single)       Value of selected option
  Checkbox              Its value attribute (not checked state)
  Radio button          Value of the checked radio in group
  Hidden input          Its value attribute

Practical: Form Data Collection

HTML:
<input type="text" id="fullName" />
<input type="email" id="email" />
<select id="plan">
    <option value="basic">Basic</option>
    <option value="pro">Pro</option>
</select>
<button id="preview">Preview</button>

jQuery:
$(document).ready(function() {
    $("#preview").click(function() {
        var name  = $("#fullName").val();
        var email = $("#email").val();
        var plan  = $("#plan").val();

        $("#summary").html(
            "Name: " + name + "<br>" +
            "Email: " + email + "<br>" +
            "Plan: " + plan
        );
    });
});

val() with Multiple Select

When a select allows multiple selections, val() returns an array of all selected values.

HTML:
<select id="skills" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
</select>

jQuery:
var selected = $("#skills").val();
// If HTML and CSS are selected → ["html", "css"]

Common Mistake

Many beginners use html() or text() to read input values. These do not work for form elements — always use val() for inputs, textareas, and selects.

Wrong:   $("#name").text()    → returns "" (inputs have no text content)
Correct: $("#name").val()     → returns the input's current value

Quick Summary

• val() reads or writes the value of form elements.
• No argument = getter; with argument = setter.
• For dropdowns, it returns the value attribute — not the display text.
• For checkboxes, use is(":checked") to detect checked state, not val().
• For radio buttons, filter with :checked before calling val().
• For multi-select, val() returns an array.