How to Get Input Text Box Values with jQuery

By the end of this page, you will understand how to read the value of a text input in jQuery, when to use .val(), which events commonly trigger value reading, and how to display that value in the page instead of only showing it in an alert.

In jQuery, the most common way to get the value of an <input> element is with the .val() method.

$("#txt_name").val()

This reads the current value typed into the input field.

To make this useful, you usually combine .val() with an event such as:

• keyup — runs after a key is released
• input — runs when the value changes
• change — runs when the input loses focus after being changed
• click — useful when reading a value after pressing a button

Why this matters:

• Forms need to collect user input
• Search boxes need to react to what users type
• Validation needs to check whether a value is empty or valid
• Interfaces often display live previews of text being entered

jQuery makes this easier by giving you a simple way to select elements and work with their values.

A common pattern is:

1. Select the input
2. Listen for an event
3. Get the current value with .val()
4. Render or process that value

For example:

Think of an input box as a small container that holds text.

• The user types text into the container
• .val() opens the container and reads what is inside
• An event tells your code when to check the container
• Rendering means taking that value and showing it somewhere else

A simple analogy:

• The input is a note box
• The user drops in a note
• jQuery waits for a signal like keyup or input
• Your code reads the note and copies it onto a display board

So the full idea is not just “get the value,” but also “get the value at the right time.”

The core syntax for reading an input value is:

$("selector").val()

To set a value, use:

$("selector").val("new value")

Example 1: Read value on button click

<input type="text" id="txt_name" />
<button id="showBtn">Show Value</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  $("#showBtn").click(function() {
    const name = $("#txt_name").val();
    $("#output").text(name);
  });
});

Consider this example:

<input type="text" id="txt_name" />
<p id="output"></p>

<script>
$(document).ready(function() {
  $("#txt_name").on("input", function() {
    const currentValue = $(this).val();
    $("#output").text(currentValue);
  });
});
</script>

Here is what happens step by step:

1. The page loads.
2. $(document).ready(...) waits until the DOM is ready.
3. jQuery finds the element with id txt_name.
4. An input event handler is attached to that element.
5. The user types A into the box.
6. The input event fires.

Getting input values is used everywhere in web development.

Common examples

• Search boxes: read what the user types and filter results
• Login forms: collect email and password values
• Live previews: show a username, title, or message as it is typed
• Validation: check whether a field is empty before submitting
• Calculators: read numeric values and compute results
• Filters: update product or table views based on typed text

Example: simple live search text

$("#search").on("input", function() {
  const keyword = $(this).val().toLowerCase();
  $("#searchStatus").text("Searching for: " + keyword);
});

Example: form validation

$("#nameForm").submit(function(event) {
  const name = $("#txt_name").val().trim();

  if (name === "") {
    event.preventDefault();
    $().();
  }
});

In real projects, developers rarely use alert() for input values. They usually combine .val() with structured patterns.

1. Validation before processing

const email = $("#email").val().trim();
if (email === "") {
  $("#error").text("Email is required.");
  return;
}

This is a guard clause: stop early if the value is invalid.

2. Read once, reuse many times

$("#saveBtn").click(function() {
  const name = $("#txt_name").val().trim();
  const city = $("#txt_city").val().trim();

  $("#summary").text(name + " from " + city);
});

This avoids calling .val() repeatedly.

3. Live UI updates

1. Using .text() instead of .val() for inputs

Broken code:

const name = $("#txt_name").text();

Why it is wrong:

• .text() reads text content between tags
• <input> elements do not store user input as inner text

Correct code:

const name = $("#txt_name").val();

2. Forgetting to wait for the DOM

Broken code:

$("#txt_name").on("input", function() {
  console.log($(this).val());
});

If this runs before the input exists, the handler may not attach.

Correct code:

$().(() {
  $().(, () {
    .($().());
  });
});

Common ways to read input values

.val() vs vs

// Get input value
$("#txt_name").val();

// Set input value
$("#txt_name").val("Alice");

// Read value on input
$("#txt_name").on("input", function() {
  const value = $(this).val();
});

// Read value on keyup
$("#txt_name").keyup(function() {
  const value = $(this).val();
});

// Read value on change
$("#txt_name").change(function() {
  const value = $(this).val();
});

// Render value into another element
$("#output").text($("#txt_name").val());

Quick rules

• Use .val() for form values
• Use .text() to display plain text in another element

How do I get the value of a text box in jQuery?

Use .val() on the selected input element:

const value = $("#txt_name").val();

How do I display an input value on the page with jQuery?

Read the input with .val() and write it to another element with .text():

$("#output").text($("#txt_name").val());

Which event should I use to detect typing in an input?

Use input in most cases. It is usually better than keyup because it responds to more types of changes.

Why is .text() not working on my input field?

Because .text() reads inner text content, and input fields store their user-entered value in .value, which jQuery accesses with .val().

Does .val() return a string or a number?

• jQuery selectors — needed to target the correct input or output element.
• DOM events — important for knowing when to read the value.
• Form handling — input values are a core part of submitting and validating forms.
• Event delegation — useful when inputs are added dynamically.
• String methods — methods like .trim() are often used after reading input.
• Type conversion — necessary when input values should be treated as numbers.
• Native DOM manipulation — helpful for understanding the non-jQuery equivalent of .val() and .text().