Skip to main content

How to Clear an Input Field After Form Submit in JavaScript

A common requirement for a good user experience is to clear the input fields of a form after the user has successfully submitted it. This provides clear feedback that the action was completed and prepares the form for new input.

This guide will teach you the most effective methods for clearing form fields in JavaScript. You will learn how to clear a single input, multiple specific inputs, and, most importantly, the recommended best practice of using the form.reset() method to clear all fields at once.

The Core Concept: Listening to the submit Event​

When working with forms, the best practice is to listen for the submit event on the <form> element itself, rather than a click event on the submit button. This ensures your code runs regardless of how the form is submitted (e.g., by clicking the button or pressing the Enter key in an input field).

Problem: after a user submits a form, the input values remain in the fields. We need to clear them.

<form id="myForm">
  <input type="text" id="firstName" name="firstName" placeholder="First Name">
  <input type="text" id="lastName" name="lastName" placeholder="Last Name">
  <button type="submit">Submit</button>
</form>
const form = document.getElementById('myForm');

form.addEventListener('submit', function handleSubmit(event) {
  // Prevent the default form submission, which reloads the page.
  event.preventDefault();

  // Here, you would typically send the data to a server.
  console.log('Form submitted!');
  
  // Now, we need to clear the fields.
});

How to Clear a Single Input Field​

To clear a single input, you simply get a reference to the element and set its .value property to an empty string ('').

const form = document.getElementById('myForm');
const firstNameInput = document.getElementById('firstName');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Send value to server...
  console.log(`Submitting first name: ${firstNameInput.value}`);

  // Clear the input field
  firstNameInput.value = '';
});
note

This is a direct and effective method for a single field.

How to Clear Multiple Specific Input Fields​

If you need to clear a few specific fields but not the entire form, you can select them all and iterate through them. The querySelectorAll() method is perfect for this.

const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Select a NodeList of all the inputs you want to clear.
  const inputsToClear = document.querySelectorAll('#firstName, #lastName');
  
  // Iterate over the NodeList and set each input's value to empty.
  inputsToClear.forEach(input => {
    input.value = '';
  });
  
  console.log('Cleared specific input fields.');
});

The Best Method: How to Clear All Fields with form.reset()​

The most efficient, robust, and recommended way to clear a form is to use the built-in form.reset() method. This method restores all form fields (including inputs, textareas, and selects) to their initial values.

  • For most fields, this means clearing them to an empty string.
  • For checkboxes and radio buttons, it unchecks them.
  • If an input had a value attribute in the HTML, it will be reset to that default value.

This is the cleanest and most comprehensive approach.

const form = document.getElementById('myForm');

form.addEventListener('submit', function handleSubmit(event) {
  event.preventDefault();

  // (Send data to the server here)
  console.log('Form data submitted. Now resetting the form.');

  // This single line clears all fields within the form.
  form.reset();
});
note

Using form.reset() is the best practice because it is a single, readable command that handles all types of form controls correctly.

Conclusion​

Clearing a form after submission is a simple task with several good solutions in JavaScript.

  • To clear a single input, set its .value property to an empty string: myInput.value = '';.
  • To clear multiple specific inputs, select them with querySelectorAll() and loop through them, setting their .value to ''.
  • The recommended best practice for clearing an entire form is to call the form.reset() method, which is the most efficient and comprehensive solution.

By always listening to the submit event and using form.reset(), you can write clean, professional, and user-friendly form handling code.

Table of Contents