Clear Input fields after Submit using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 08 20222 min read

Table of Contents #

  1. Clear an input field after submit
  2. Clear multiple input fields after submit
  3. Clear all form fields after submitting

Clear an Input field after Submit #

To clear an input field after submitting:

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

Here is the HTML for this example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" id="first_name" name="first_name" /> <button id="btn">Submit</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
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 = ''; });

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.

Clear multiple input fields after submit #

To clear the values for multiple inputs after submitting:

  1. Use the querySelectorAll() method to select the collection
  2. Use the forEach() method to iterate over the results.
  3. Set the value of each input field to an empty string to reset it.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" id="first_name" name="first_name" /> <input type="text" id="last_name" name="last_name" /> <button id="btn">Submit</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
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 = ''; }); });

We used the 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 forEach method gets invoked with each input in the NodeList, where we set the value of each to an empty string.

Clear all form fields after submitting #

To clear all form fields after submitting:

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

Here is the HTML for this example:

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </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>

And here is the related JavaScript code.

index.js
const form = document.getElementById('my_form'); form.addEventListener('submit', function handleSubmit(event) { event.preventDefault(); // 👇️ Send data to server here // 👇️ Reset form here form.reset(); });

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 element to their default values.

Use the search field on my Home Page to filter through my more than 1,000 articles.