How to Clear the Input Field Value using JavaScript

JavaScript is an important tool to use in making forms more interactive and user-friendly.
It allows you to do things like validation, error messages, and clearing form fields.
In this post, we'll learn how you can use JavaScript to clear the value of an input field.
Clearing Input Field Value
Clearing the input field value is useful when you want to reset a form, or to clear a form after a user submits it.
Let's start with a basic example form:
<form>
<input type="text" name="username" placeholder="Username" class="username" />
<button class="clear">Clear</button>
</form>
In this small form, we have an input field with a name of username
, and a button with a class of clear
.
When the user clicks the button, we want to clear the value of the input field.
To accomplish this, we first must query for both elements, which we can use querySelector
for:
const username = document.querySelector(".username");
const clear = document.querySelector(".clear");
Then, we can add an event listener to the button. Inside the event listener, we can use the value
property to clear the input field:
const username = document.querySelector(".username");
const clear = document.querySelector(".clear");
clear.addEventListener("click", () => {
username.value = "";
});
Now, when you click the button, the input field will be cleared.
Conclusion
In this post, we learned how to clear the value of an input field. As mentioned before, this is most common when you want to reset a form after submitting it.
Hopefully, you learned something and found this useful.
Happy coding!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on X! You can also join the conversation over at our official Discord!
Leave us a message!