How to Reset or Clear a form using JavaScript?

[SKREECH]

Hi friends,
I am new to the scripting. Recently I have started doing the JavaScript. I have designed the form in HTML. But for making the form more advanced I will have to use the JavaScript. Now I have stuck while writing the script for the reset button. I want the reset button on my form so that the details filled into it should be cleared which are seen in almost websites. So anyone hanging out there can explain me how to reset or clear a form using JavaScript?. Please help me soon.!!

[CodGuru]

You use the reset button to erase the details filled by the user and sometimes it keeps the default settings. Using an HTML 'Reset' button is an easy way to reset all form fields to their default values. So I thought that providing the sytnax type code would be more helpful to understand. The code that I have mentioned below shows an <input> field of type "reset", which on being clicked resets all the form fields :

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

The other method for doing the same thing is by using the form's reset() method along with the simple button element. Here is the code for that :

 <input type="button" value="Reset Form" onClick="howto.reset()" />

[void]

You can look at an example of a simple form below :

<form name="salary_entry" action="#">

Company Name: <input type="text" size="35" name="company_name">

Select Business Type: <input type="radio" name="class_category" value="1"> Typer
<input type="radio" name="class_category" value="2"> Clerk
<input type="radio" name="class_category" value="3"> Assistant Manager 
<input type="radio" name="class_category" value="4"> Manager

Email Address: <input type="text" size="30" name="email">

Keep Information Private: <input type="checkbox" name="privacy">

<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">

<input type="button" name="clear" value="Clear Form" onclick="clearForm(this.form);">
</form>

[absolute55]

You should keep in mind that to acquire a reference to all the elements in the form object, you would have to use the following :

var frm_elements = oForm.elements;

where, oForm is a reference to the form object passed to the function using this.form. oForm.elements can also be Javascript array that holds a reference to each of the form elements.

[Reegan]

At times the new developers get confused between the reset and clear options. So I have provided you with the following snippet of code which sets the default for the radio element named "business_category" to the value 3. Check the coding :

<input type="radio" name="business_category" value="1">Manufacturer
<input type="radio" name="business_category" value="2">Whole Sale Supplier
<input type="radio" name="business_category" value="3" checked>Retailer
<input type="radio" name="business_category" value="4">Service Provider