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:
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.
JavaScript Clear Input
In JavaScript, we usually consider a specific property to deal with the input value. The value property along with the getElementById() method grabs an input field’s detail.
Please enable JavaScript
Later, we can perform some conditions based on the entry. Again, we can also depend on some HTML attributes to connect the input elements and JavaScript functions.
Here, we will present some examples that can be implemented in multiple ways.
Use the onfocus Attribute to Vanish Input Field in JavaScript
We will initially declare an input field with a defined value for this example. Also, the input element will jump to perform the function clearF(this) as soon the cursor will point or focus in the input box.
If the function’s condition is served, it will remove the value, and thus the input gets cleared.
Its content vanishes as the cursor is placed and clicked on the input field. The this refers to its value for the specific element.
Use Conditional Statement to Clear Form Input Value in JavaScript
According to a form submission, it is necessary to have a corresponding button element to store data. We will take a form element, and the button associated with it will carry an onclick attribute to fire a function.
The function will check if the input field is empty or not. If it finds any content, it will simply reinitialize it empty.
Here, we have an instance of the grab form that will take the id . When the button is clicked, the function will check if the input is empty, and it will perform just as the conditional statement describes.
Use the reset() Method to Erase Form Input Fields in JavaScript
We will also examine a form to clear its input by the reset() method. All it will need is to create an instance of the form, and on the button click, it will reset the whole form vanishing the inserted contents.
Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.
HTML how to clear input using javascript?
I have this INPUT, it will clear everytime we click inside of it.
The problem: I want to clear only if value = exemplo@exemplo.com
Can someone help me to do this? I don’t know how to compare, I already tried but no success.
8 Answers 8
Is this really what your looking for?
For me this is the best way:
you can use attribute placeholder
or try this for older browsers
You could use a placeholder because it does it for you, but for old browsers that don’t support placeholder, try this:
CODE EXPLAINED: When the text box has focus, clear the value. When text box is not focused AND when the box is blank, replace the value.
I hope that works, I have been having the same issue, but then I tried this and it worked for me.
How to reset or clear a form using JavaScript?
This tutorial teaches us how to reset or clear a form using JavaScript. This option is very helpful for users in the situation where they have filled the wrong form and before submitting they get to know about it and now they want to delete all the data. If the form is too large then manually deleting everything may be hard so it’s better to use the reset() method of JavaScript.
The reset() method is defined in JavaScript and by just clicking on it the form which will be linked to its onclick() method will reset every input section of the provided form.
Syntax
We have seen the basics of the reset() function, now let’s move to its syntax −
In the above syntax, “Id_of_required_form” is the id of the form which we want to reset or clear. We have used the ‘getElementById’ method of the DOM to get the form and stored that in a variable name ‘element’.
After that, by using the method reset() we reset or clear the form with the id ‘Id_of_required_form’ element by calling it.
Algorithm
We have seen the syntax to reset or clear a form by getting its id and reset() method, let’s see the complete algorithm step by step to understand it in a better way −
Creating a user form
In these steps, we will create the form in which we will define or create many input boxes for user input to fill the form and a button which will call the function to delete the object from the dropdown list.
Initially, we have to create a form using the <form> tag which we want to reset or clear using the reset() method of JavaScript.
In the form, we have created some input boxes by using the <input> tag where the user can write the data.
These input spaces will be of type text and number to get the user input in the required type.
In the form after defining ‘inputs’ to take user input, we will define an input field using the <input> tag and will make it of type button and we will define the ‘onclick’ event which will call the function which we will define later in the script.
Defining script or function to remove
In these steps, we will define the function which will be called in the ‘onclick’ event of the above-defined button.
Initially, we will create a function using the ‘function’ keyword and will give it a name that will be called in the ‘onclick’ event.
In the defined function we will create a variable to store the return value from the call to the ‘document.getElementById()’ method.
We will pass the ‘id’ of the above-defined form as the parameter to the call to the ‘document.getElementById()’ method.
By using the reset method with the variable (which contains the return value of the call to the method) we can reset every input field to empty.
These are the basic steps to reset or clear a form using JavaScript, now let’s see some examples to get a better understanding of the above-defined steps.
Example
In this example, we are going to implement the above-defined algorithm step by step, let’s implement the code −
In the above output, we got one form in which there are some input spaces, where the user can provide some input and at last, there is a reset button which will reset the form to the original or initial form.
Conclusion
In this tutorial, we have learned the method to reset or clear the HTML form using JavaScript. This is only possible if while defining the HTML form programmer defines or creates a button for the user to reset the form otherwise the user has to reset it manually.
The reset() function is defined in JavaScript and by just clicking on it the form which will be linked to its onclick() method will reset every input section of the provided form. Also, if there is any pre-defined value is there present for any input it will get that value.