Clear Input fields after Submit using JavaScript

# Table of Contents

# Clear an Input field after Submit

To clear an input field after submitting:

Add a click event listener to a button.
When the button is clicked, set the input field's value to an empty string.
Setting the field's value to an empty string resets the input.

Here is the HTML for this example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" name="first_name" />

    <button id="btn" type="submit">Submit</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick(event) {
  // 👇️ if you are submitting a form (prevents page reload)
  event.preventDefault();

  const firstNameInput = document.getElementById('first_name');

  // Send value to server
  console.log(firstNameInput.value);

  // 👇️ clear input field
  firstNameInput.value = '';
});

clear input field after submit

The code for this article is available on GitHub

We added a click event listener to the button.

Every time the button is clicked, the handleClick function is invoked, where we set the value of the input to an empty string.

I've also written a tutorial on how to clear the value of a textarea.

# Clear multiple input fields after submit

To clear the values for multiple inputs after submitting:

Use the querySelectorAll() method to select the collection.
Use the forEach() method to iterate over the results.
Set the value of each input field to an empty string to reset it.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <input type="text" id="first_name" name="first_name" />
    <input type="text" id="last_name" name="last_name" />

    <button id="btn" type="submit">Submit</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick(event) {
  // 👇️ if you are submitting a form
  event.preventDefault();

  const inputs = document.querySelectorAll('#first_name, #last_name');

  inputs.forEach(input => {
    input.value = '';
  });
});

clear multiple input fields after submit

The code for this article is available on GitHub

We used the document.querySelectorAll method to select a NodeList containing the elements with IDs set to first_name and last_name.

The method takes a string that contains one or more valid CSS selectors.

The function we passed to the NodeList.forEach method gets invoked with each input in the NodeList.

In the function, we set the value of each input to an empty string.

I've also written a guide on how to use multiple conditions with querySelectorAll.

# Clear all form fields after submitting

To clear all form fields after submitting:

Add a submit event listener on the form element.
When the form is submitted, call the reset() method on the form.
The reset method restores the values of the input fields to their default state.

Here is the HTML for this example:

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <form action="" id="my_form">
      <input type="text" id="first_name" name="first_name" />
      <input type="text" id="last_name" name="last_name" />

      <button id="btn" type="submit">Submit</button>
    </form>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const form = document.getElementById('my_form');

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

  // 👇️ Send data to the server here

  // 👇️ Reset the form here
  form.reset();
});

clear all form fields after submitting

The code for this article is available on GitHub

We added a submit event listener to the form element.

The event fires when a form is submitted.

We used the event.preventDefault() method to prevent the page from reloading.

The reset() method restores a form's elements to their default values.

If you need to show/hide a form on a button click, check out the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Clear Input fields after Submit using JavaScript

# Table of Contents

# Clear an Input field after Submit

# Clear multiple input fields after submit

# Clear all form fields after submitting

# Additional Resources

Borislav Hadzhiev