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:

• “onfocus” event and “target” property
• “onclick” event and “document.getElementById()” method
• “reset()” method

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:

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.