Javascript clear all input

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

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.

  
Clearing only single input field of form when a user submits the form
 
Please enter a string below:
   
 clear input field    

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.

  
Clearing only all input fields of form when a user submits the form
 First Name:  
 
Last Name:  
 
Email:  
 clear all inputs    

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.

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.

  
Clearing only the form using the reset() method when a user submits the form
 
Name:  
 
Email:  
 
 clear all inputs 
    

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.

Источник

Javascript clear all input

Last updated: Jan 12, 2023
Reading time · 3 min

# Table of Contents

# 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.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> input type="text" id="first_name" name="first_name" /> button id="btn" type="submit">Submitbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

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 = ''; >); 

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.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> 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">Submitbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

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 = ''; >); >); 

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.

# 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:

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> 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">Submitbutton> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

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(); >); 

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 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.

Источник

How to Clear Input Fields in JavaScript

There can be a situation where it is required to clear the entered value of an input field or the whole form. For instance, you need to change the category or encounter a specific requirement to change all of the entered data. In such cases, clearing input fields using JavaScript becomes very effective and useful.

This article will discuss the methods to clear the input fields in JavaScript.

How to Clear Input Fields in JavaScript?

To clear input fields in JavaScript, the following approaches can be utilized:

Go through the discussed methods one by one!

Method 1: Clear Input Fields in JavaScript Using onfocus Event and target Property

The “onfocus” event is triggered when a specific element gets focus, and the “target” property returns the element that triggered the event. More specifically, these techniques can be applied to clear the specified target value in the input field.

The following example explains the discussed concept clearly.

Example

In the following example, we will assign an input type as “text” with the specified value and and attach as onfocus event to it which will trigger the clearInput() function:

Now, define the function named “clearInput()” with the “target” property as its argument in order to return the element that triggered the event. After that, a specific condition will be applied that if the input field hold a particular value, such as “clear input”, the input field will be cleared:

Now, when the user will input “clear input” value in the input field and it gets focus, the entered value will get clear:

Method 2: Clear Input Fields in JavaScript Using onclick Event and document.getElementById() Method

In JavaScript, the “document.getElementById()” method is utilized for accessing an element based on its id and “onclick” is used to attach an event to an HTML element. More specifically, this combination can be used in such a way when the added button is clicked, the input field element will be accessed, and the entered value will be cleared.

Example

Firstly, assign an input type with an id named as “name”:

Then, create a button with a value named “clear” and add an “onclick” event which will access the clearInput() function when triggered:

Now, define a function named “clearInput()”. Here, the document.getElementbyId() will access the input field using its id. Then, an “if” condition will be applied so that as long as the input field is not empty, the value of the input field will be set as empty:

function clearInput ( ) {
var getValue = document. getElementById ( «name» ) ;
if ( getValue. value != «» ) {
getValue. value = «» ;
}
}

In this scenario, clicking the added button will clear the input field value:

Want to reset all input field values at once? Check out the next method.

Method 3: Clear Input Fields in JavaScript Using reset() Method

The “reset()” method clears all the values of the form elements. This method can be implemented to clear the input field holding text with a click of a button.

Syntax

Here, “formObject” is the element that will be reset.

Have a look at the given example.

Example

First, create a form and assign it an id as demonstrated below. Next, ask the user to enter an “ID” in the input field. Then, include a button with an “onclick” event accessing a function as discussed in the previous method:

Finally, declare a function named “clearInput()”, fetch the form using the document.getElementById() method and reset the input field upon the button click:

Output

We have demonstrated the techniques to clear input fields in JavaScript.

Conclusion

To clear input fields in JavaScript, utilize the “onfocus” event and “target” property to apply the functionality based on the presence of a particular value, or the “onclick()” event and “document.getElementById()” method for getting the id of the input field and clearing the field as long as there is some value in it or the “reset()” method to reset the values of all input field at once. This write-up has explained the methods to clear the specified input fields in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник