Skip to content

Clear input field JavaScript onClick | Code

  • by

To clear input field JavaScript onClick set input field to empty string using JavaScript function. Or Just use simple reset button.

<form>

  <input type="text" id="textfield1" size="5">
  <input type="text" id="textfield2" size="5">

  <input type="reset" value="Reset">

</form>

Clear input field JavaScript onClick

A simple JavaScript function will do the job.

function ClearFields() {

     document.getElementById("textfield1").value = "";
     document.getElementById("textfield2").value = "";
}

And just have your button call it:

<button type="button" onclick="ClearFields();">Clear</button>

Complete example code

<!DOCTYPE html>
<html>
<body>
  <body>

    <div>           
      <input type="text" id="textfield1" size="5"/>
      <input type="text" id="textfield2" size="5"/>  

      <button type="button" onclick="ClearFields();">Clear</button>

      <script>
        function ClearFields() {

         document.getElementById("textfield1").value = "";
         document.getElementById("textfield2").value = "";
       }
     </script>         
   </div>

 </body>
 </html>

Output:

Clear input field JavaScript onClick

Do comment if you have any doubts or suggestions on this Js HTML topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading