Clear Input Field on Click in Javascript

by

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <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>

</head>
<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>

</body>
</html>

script.js

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

Result

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

I hope it will help you.