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 asp.net 2.0.
Using ASP.NET
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.
C#
protected void btnClearASP_Click(object sender, EventArgs e)
{
ResetFormControlValues(this);
}
VB.NET
ProtectedSub btnClearASP_Click(ByVal sender AsObject, ByVal e As EventArgs)
ResetFormControlValues(Me)
EndSub
Step 4: Write code for this method
C#
private void ResetFormControlValues(Control parent)
{
foreach (Control c in parent.Controls)
{
if (c.Controls.Count > 0)
{
ResetFormControlValues(c);
}
else
{
switch(c.GetType().ToString())
{
case "System.Web.UI.WebControls.TextBox":
((TextBox)c).Text = "";
break;
case "System.Web.UI.WebControls.CheckBox":
((CheckBox)c).Checked = false;
break;
case "System.Web.UI.WebControls.RadioButton":
((RadioButton)c).Checked = false;
break;
}
}
}
}
VB.NET
PrivateSub ResetFormControlValues(ByVal parent As Control)
ForEach c As Control In parent.Controls
If c.Controls.Count > 0 Then
ResetFormControlValues(c)
Else
SelectCase c.GetType().ToString()
Case "System.Web.UI.WebControls.TextBox"
CType(c, TextBox).Text = ""
Case "System.Web.UI.WebControls.CheckBox"
CType(c, CheckBox).Checked = False
Case "System.Web.UI.WebControls.RadioButton"
CType(c, RadioButton).Checked = False
EndSelect
EndIf
Next c
EndSub
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="http://www.w3.org/1999/xhtml" >
<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 = "";
break;
case "checkbox" :
doc.checked = false;
break;
case "radio" :
doc.checked = false;
break;
case "select-one" :
doc.options[doc.selectedIndex].selected = false;
break;
case "select-multiple" :
while (doc.selectedIndex != -1)
{
indx = doc.selectedIndex;
doc.options[indx].selected = false;
}
doc.selected = false;
break;
default :
break;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
// Other control come here
// Code courtesy 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!!
