ASP.NET 2.0 ‘Easy To Do’ Series – Reset values of all controls using ASP.NET 2.0 and JavaScript

Posted by: Suprotim Agarwal , on 9/29/2007, in Category ASP.NET
Views: 118588
Abstract: I recently received a request to cover some basic tips that could be useful for anyone using ASP.NET 2.0, in their projects. I am creating the 'ASP.NET 2.0 Easy To Do' series to cover such topics. In this article we will see how easy it is to use recursion and clear values of all controls on a page using ASP.NET 2.0 and JavaScript
Reset values of all controls using ASP.NET 2.0 and JavaScript
A very common requirement that comes up when building a form with lot of fields is resetting the controls back to their original state. In this article, we will explore how to do this task using both ASP.NET and Javascript. I assume you know how to build web pages in 2.0.
Step 1: Drag and drop a few controls like textboxes, radio buttons, checkboxes etc. on to the form
Step 2: Add a button to the form and rename its Text property as “Clear all controls using ASP.NET”.  Rename its id property to be “btnClearASP”.
Step 3: Double click the button. In its click event, call a method that will clear the content of the controls on a Page.
protected void btnClearASP_Click(object sender, EventArgs e)

Protected Sub btnClearASP_Click(ByVal sender As Object, ByVal e As EventArgs)



End Sub

Step 4: Write code for this method
private void ResetFormControlValues(Control parent)
        foreach (Control c in parent.Controls)
            if (c.Controls.Count > 0)
                    case "System.Web.UI.WebControls.TextBox":
                        ((TextBox)c).Text = "";
                    case "System.Web.UI.WebControls.CheckBox":
                        ((CheckBox)c).Checked = false;
                    case "System.Web.UI.WebControls.RadioButton":
                        ((RadioButton)c).Checked = false;
PrivateSub ResetFormControlValues(ByVal parent As Control)
ForEach c As Control In parent.Controls
If c.Controls.Count > 0 Then
SelectCase c.GetType().ToString()
CType(c, TextBox).Text = ""
CType(c, CheckBox).Checked = False
CType(c, RadioButton).Checked = False
Next c
The above function is a recursive function that clears the controls values on a page. I am not sure if this will work for a collection control like a RadioButtonList or similar. But I hope you have got some idea of how to write a function to reset contents on a page.
  Using Javascript
 Step 1: Drag and drop a few controls like textboxes, radio button, checkboxes etc. on to the form.
Step 2: Drag and drop a html button on the form. Rename it to “Clear All Controls Using Javascript”. Add an 'OnClick' attribute and point it to a function “ClearAllControls()” as shown below
<input id="Button1" type='button' onclick='ClearAllControls()' value='Clear All Controls Using Javascript'/>
Step 3: Write code for this function 'ClearAllControls()’. In the <head> section of the page, add a <script> tag and write the code for the function as shown below :
<html xmlns="" >
<head runat="server">
    <title>Reset controls</title>
    <script language="javascript" type='text/javascript'>
        function ClearAllControls()
              for (i=0; i<document.forms[0].length; i++)
                    doc = document.forms[0].elements[i];
                    switch (doc.type)
                        case "text" :
                                doc.value = "";
                          case "checkbox" :
                                doc.checked = false;
                          case "radio" :
                                doc.checked = false;
                          case "select-one" :
doc.options[doc.selectedIndex].selected = false;
                          case "select-multiple" :
                                while (doc.selectedIndex != -1)
                                      indx = doc.selectedIndex;
                                      doc.options[indx].selected = false;
                                doc.selected = false;
                          default :
    <form id="form1" runat="server">
// Other control come here
// Original Code frumbert
That’s it. Quiet simple, wasn’t it. I would encourage you to play with the code and add to it, by writing some of your own for the other controls on the page.
Happy coding!!
In this article, we saw how easy it was to reset controls on a page. If you require a specific tip, drop in a line to me at or add your request as a comment on this page. Your comments will drive me to continue this series. I hope this article was useful and I thank you for viewing it.
If you liked the article,  Subscribe to my RSS Feed. 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by amal on Monday, October 1, 2007 2:14 AM
good for basic tips
Comment posted by naidu on Tuesday, November 6, 2007 2:01 AM

Thanks for the above article. But i would like to know how it  is possible to clear the value of the FileUpload control using javascript in the .aspx form. It would be a great help if i receive any suggestions from you. Thanks in advance.

Comment posted by Suprotim Agarwal on Wednesday, November 7, 2007 11:30 PM
Dear Naidu,
To clear the FileUpload control using javascript, use the following code :

Page.RegisterClientScriptBlock("empty","document.getElementById(' " + myFileUpload.ClientID+ " ').innerText = ' ';");
Comment posted by Jaydeep on Monday, November 19, 2007 1:33 AM
When I am using the above script, one problem occurs. The validation message not gets invisible.

Comment posted by Suprotim Agarwal on Wednesday, November 21, 2007 9:03 AM
Jaydeep, which validation message are you talking about?
Comment posted by DD on Tuesday, September 2, 2008 1:27 PM
Is this different than using <input type="reset" />
Comment posted by mosser on Tuesday, September 2, 2008 6:12 PM
I think the author wanted to show how to do it on a server side button ctrl and the js example for not causing a postback. Good article!
Comment posted by amit dubey on Tuesday, September 16, 2008 5:38 AM
Comment posted by amit dubey on Tuesday, September 16, 2008 5:41 AM
Comment posted by Rahul on Wednesday, September 17, 2008 4:28 AM
Yes , i got the solution but this thing can be done just by single click on the "reset" button in html pages . And here the problem is totally client side not server side. so is there any solution that is suppose to be fast and efficient beside long javascript and serverside coded solution. I think i am right to ask this question. Isn't it ?
Comment posted by mosser on Wednesday, September 17, 2008 8:23 AM
I think If you do not want to use a server control, the reset button should be ok.
Comment posted by sandy on Wednesday, March 25, 2009 9:57 AM
very good site
Comment posted by DG on Friday, March 27, 2009 2:02 PM
Very helpful! Add this to the javascript and it will clear multi-line text boxes:

                case "textarea":
                    doc.value = "";
Comment posted by Mohit Zinzuvadia on Tuesday, September 22, 2009 10:22 AM
oh boss...thank you very much for your this really helped me alot...thank you very much
Comment posted by Ratheesh.S on Tuesday, October 6, 2009 5:10 AM
Hi author Please replace document.forms[0].length with document.forms[0].elements.length otherwise it may cause and index problem :-)  

for (i=0; i<------document.forms[0].length-----; i++)
                    doc = document.forms[0].elements[--i--];

Comment posted by Appelman on Thursday, March 4, 2010 5:10 AM
Is there any way to clear the fileupload control using C# code?
Comment posted by cfs on Thursday, April 29, 2010 6:05 AM
Comment posted by shekhar on Thursday, April 29, 2010 6:07 AM
Is there any way without using Control collection , I can clear controls using property. like viewstate,?????
Comment posted by Prashant Mishra on Tuesday, July 20, 2010 10:49 AM
Nice Stuff!!! Can we retrieve all the control of a panel in same way?  
Comment posted by venkat kumar karra on Thursday, August 5, 2010 2:08 AM
Very good artical,
Comment posted by SYSTEN on Tuesday, January 18, 2011 2:44 AM
Very good site its better to know more about .NET
Comment posted by SYSTEN on Tuesday, January 18, 2011 2:45 AM
Very good site its better to know more about .NET
Comment posted by Ben on Thursday, March 3, 2011 6:10 AM
Very useful. You can also reset drop down lists to the first value by adding:

case "System.Web.UI.WebControls.DropDownList":
((DropDownList)c).SelectedIndex = 0;
Comment posted by lalitha on Wednesday, August 10, 2011 6:44 AM
Comment posted by neeraja on Wednesday, August 10, 2011 6:46 AM





C# Book for Building Concepts and Interviews



jQuery CookBook