JavaScript reset() method

To illustrate reset() method of JavaScript we have created a simple HTML page into which we have created a form with the id "userform".

JavaScript reset() method


In JavaScript there are two ways to reset the given form as follows :

  • By using Reset button of HTML
  • By using reset() method of JavaScript

Example of Reset button :

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

Example of reset() method :


Syntax : Syntax for using reset() method is as given below :


Where form_object is the reference to any form and method reset() will be applied on this form.

Description of code:

To illustrate reset() method of JavaScript we have created a simple HTML page into which we have created a form with the id "userform". Into this form we have taken two input fields "Name" and "Age". These fields are to be reset when the user clicks on the button "Reset all fields". It calls the function resetForm() defined in between <script></script> tags. Function is defined as below :

 function resetForm(){

In above lines of code we have first taken the reference to the form which is to be reset and thereafter we have used method reset() over it. Here is the full example code for resetExample.html :

<script language="JavaScript">
 function resetForm(){
<div style="background: #ff9900; width:'100%';"
  <font color="#0000ff" size="12pt">
	<b>Reset Example</b>
    <div style="background: #0099ff; width:'100%';"
	<form id="userForm" >
	<p>Name <input type="text" id="txtname" /></p>
	<p>Age&nbsp;&nbsp;&nbsp;<input type="text"
                 id="txtage" /></p>
	<p> <input type="button" value="Reset all fields"

Output :

Fill the form fields "Name" and "Age"

When you will click on the button "Reset all fields" it will reset all input entries.

Download Source Code




We have 1000s of tutorials on our website. Search Tutorials tutorials on our website.

Share on Google+Share on Google+

JavaScript reset() method

Posted on: February 7, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: JavaScript reset() method  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
March 25, 2012
Great code

Thank you so much! I was going crazy looking all over the web for this! I have a huge project due and none of it is my textbook. My professor actually encourages using the web to find code. I could not find anything this good or useable anywhere, thank you! [Outline your text boxes so I can see them better, lol!]
August 8, 2013

Cool Stuff, Thanks brother :)