How to Clear Input Field in JavaScript

Use the .value property when you want to empty an input field after form submission, button clicks, search resets, or validation recovery. The cleanest approach is setting the value to an empty string.

What you’ll build or solve

You’ll learn how to clear an input field in JavaScript using the .value property. You’ll also know when to clear a single field versus resetting a full form.

When this approach works best

This approach is the right choice when one specific field should become empty after an action.

Common real-world scenarios include:

• Clearing a search bar
• Resetting a chat input
• Emptying a newsletter field after submit
• Removing old error input
• Resetting one filter field

This is a bad idea when the whole form should return to its original state. In that case, form.reset() is usually cleaner.

Prerequisites

You only need:

• A basic HTML input field
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the input and set .value to an empty string

Start by selecting the field.

<input class="search" type="text" placeholder="Search">
<button class="clear-btn">Clear</button>

<script>
  const searchInput = document.querySelector(".search");
  const clearButton = document.querySelector(".clear-btn");

  clearButton.addEventListener("click", () => {
    searchInput.value = "";
  });
</script>

This removes the current text from the field immediately.

A common real-world use is clearing the field after a successful form action.

form.addEventListener("submit", (event) => {
  event.preventDefault();
  emailInput.value = "";
});

Use form.reset() only when multiple fields should return to their original values.

form.reset();

What to look for:

• .value = "" clears the field completely
• Great for one specific input
• Use it inside click or submit callbacks
• form.reset() is better for full-form resets
• Empty fields return an empty string again

Examples you can copy

Clear search field

searchInput.value = "";

Clear message box after send

messageInput.value = "";

Reset one email field

emailInput.value = "";

Common mistakes and how to fix them

Mistake 1: Using .textContent instead of .value

What the reader might do:

searchInput.textContent = "";

Why it breaks: form fields store typed content in .value, not .textContent.

Corrected approach:

searchInput.value = "";

Mistake 2: Clearing the field before reading the value

What the reader might do:

emailInput.value = "";
console.log(emailInput.value);

Why it breaks: the original content is already gone.

Corrected approach:

const email = emailInput.value;
emailInput.value = "";

Mistake 3: Clearing one field when the whole form should reset

What the reader might do:

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Why it breaks: repeated field clearing becomes noisy and harder to maintain.

Corrected approach:

form.reset();

Troubleshooting

If the field does not clear, confirm the selector targets the actual input.

If the original text is needed later, store it before clearing.

If multiple fields need to be reset, switch to form.reset().

If the value reappears immediately, check whether another script writes it back.

Quick recap

• Use .value = "" to clear one field
• Read the value before clearing if needed
• Use it inside click or submit callbacks
• Use form.reset() for full-form resets
• Do not use .textContent for input fields