Clear Input Field on Click in Javascript

In this blog, we learn how to clear the input and a form on click in javascript. Often when the user realizes that he has filled the form wrong or has entered the wrong input box, then there is a need to reset the form. In such a situation, with the help of javascript, we can easily reset the input box at the click of a button.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clear Input Field on Click in Javascript</title>

    <script src="script.js"></script>

<body style="background-color: lightcyan;">

  <input type="text" id="name_input_id" placeholder="Name"/>
  <button type="button" onclick="InputBoxReset('name_input_id')">x</button> <br> <br>
  <input type="email" id="email_input_id" placeholder="Email"/>
  <button type="button" onclick="InputBoxReset('email_input_id')">x</button>



Here I make the ” InputBoxReset ” dynamic a function. In this, I pass input field id put blank value into the input box.

 function InputBoxReset(inputID){
     document.getElementById(inputID).value = '';


Clear input field on button click in javascript
Clear input field on button click in javascript

I hope it will help you.