How to clear the form after submitting in Javascript without using reset?

Javascript Web Development Front End Technology

On the internet, we will find very few websites that don’t contain the form. Most websites contain the contact form, some contain the job application form, and some contain the product order form.

The form allows us to take input from users and manipulate it at the front end or backend side of the application. Also, to provide a good user experience to the application user, we need to reset all the form data once the user submits the form.

In this tutorial, we will learn various approaches to clear the form's input fields once the user presses the submit button.

Clear the single input field after submitting the form

In this part, we will learn to clear the single input field of the form. Sometimes, it requires that users submit the form multiple times by changing some input values. So, in such cases, we can clear only some input fields separately rather than clearing all input fields.

Syntax

Users can follow the syntax below to clear the single input field of the form.

let input1 = document.getElementById('input1');
input1.value = "";

In the above syntax, we have accessed the form's input via its id and assigned the empty string to the value of the input.

Example

In the example below, we have created the form containing a single input. When users press the clear input field button, it invokes the ‘clearText()’ function, which resets the input field's value.

In the output, users can observe that it clears the input field when they press the submit button.

<html>
<body>
   <h3>Clearing only single input field of form when a user submits the form</h3>
   <p>Please enter a string below:</p>
   <form>
      <input type = "text" id = "input1" />
      <br> <br>
   </form>
   <button type = "submit" onclick = "clearText()"> clear input field</button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById('output');
      function clearText(event) {
         // access input field
         let input1 = document.getElementById('input1');
         // clear the input field.
         input1.value = "";
         output.innerHTML += "Form submitted successfully! <br>";
      }
   </script>
</body>
</html>

Clear all input fields of the form after submitting the form

Sometimes, we may require to clear all input fields of the form. We can use the querySelector() method of JavaScript to select all the form's input fields, which returns the array of all input fields.

After that, we can iterate through the array of inputs and clear every single input by assigning the empty string to its value attribute.

Syntax

Users can follow the syntax below to access all inputs and clear them.

var allInputs = document.querySelectorAll('input');
allInputs.forEach(singleInput => singleInput.value = '');

In the above syntax, the ‘inputs’ is an array of all inputs, and we have used the forEach() loop method to iterate through all inputs.

Example

In the example below, we have created multiple input forms of different types. After that, in JavaScript, we used the querySelector() method to select all inputs. In the forEach() loop, we have passed the callback function, which sets the empty string for a value attribute of each input.

When the user clicks the ‘clear all inputs’ button, it clears all input fields.

<html>
<body>
   <h3>Clearing only all input fields of form when a user submits the form</h3>
   <form>
      First Name: <input type = "text" id = "input1" />
      <br> <br>
      Last Name: <input type = "text" id = "input2" />
      <br> <br>
      Email: <input type = "email" id = "input3" />
      <br> <br>
   </form>
   <button type = "submit" onclick = "clearAllInputs()"> clear all inputs </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById('output');
      function clearAllInputs(event) {
         var allInputs = document.querySelectorAll('input');
         allInputs.forEach(singleInput => singleInput.value = '');
         output.innerHTML += "Form submitted and cleared successfully! <br>";
      }
   </script>
</body>
</html>

Usinf the form.reset() method reset the whole form

The form.reset() is a built-in method in JavaScript to clear the form. We can use it to reset all values to the default in the form.

Syntax

Users can follow the syntax below to use the reset() method to reset the whole form when a user submits the form.

formToReset.reset();

In the above syntax, formToReset() is a form element to reset.

Example

The below example demonstrates the use of the reset() method. It contains the form with two different input fields. Also, we have created a button of type ‘submit’, and users can press it to submit the form.

In JavaScript, we have used the event listener to submit the event and executed the reset() method on submitting an event.

<html>
<body>
   <h3>Clearing only the form using the reset() method when a user submits the form</h3>
   <form id = "demo_form">
      Name: <input type = "text" id = "input1" />
      <br> <br>
      Email:<input type = "email" id = "input3" />
      <br> <br>
      <button type = "submit"> clear all inputs </button>
   </form>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById('output');
      const formToReset = document.getElementById('demo_form');
      formToReset.addEventListener('submit', (e) => {
         e.preventDefault();
         formToReset.reset();
         output.innerHTML += "The form is resetted successfully!"
      });
   </script>
</body>
</html>

We have successfully learned three approaches to clear the form after submitting it. Users can use the reset() method to clear the whole form. Also, users can only clear the form's input fields using the second approach. Users should use the first approach to clear only particular input fields.