How to clear all controls values in web page?
In this article I am going to explain you how to clear all textbox, checkbox, radio button and drop down list values, when user click clear button. This simple code is used to clear all values using just few lines instead of writing each control values clear
Description:
For an example we are create Registration page in our project in that time we placed lots of controls like textbox, drop down list, check box and radio button etc. If user click that clear button we need to clear all controls values, without writing line by line code use this simple code to clear all values in single click event.Client side
I have places some controls in client side of the web page and look like this image .
We can clear these controls values in the two ways.
1) Using JavaScript
2) Using C# code 1) Clear all controls and its values using JavaScript
I have write one JavaScript function to get form elements and check that element type and assign values based on that type.
Element Type
<script language="javascript" type="text/javascript">
function clearAll() {
var frm = document.forms[0];
for (i = 0; i < frm.elements.length; i++)
{
if (frm.elements[i].type == "checkbox") {
frm.elements[i].checked = false;
}
if (frm.elements[i].type == "radio") {
frm.elements[i].checked = false;
}
if (frm.elements[i].type == "text") {
frm.elements[i].value="";
}
if (frm.elements[i].type == "select-one") {
frm.elements[i].value=0;
}
}
}
</script>
And then call in the button click event like this
<asp:Button ID="Button1" runat="server" Text="Clear using Javascript" OnClientClick="clearAll()" />2) Using C# code to clear all control values
This one is similar to JavaScript code get elements and clear using code behind code. In some secured site we are not able to JavaScript in that scenario use this concept.
protected void btnClear_Click(object sender, EventArgs e)
{
//This one call clear method to clear all control values
clear();
}
void clear()
{
//This loop takes all controls from the form1 - make sure your form name as form1 otherwise change it as per your form name
foreach (Control c in form1.Controls)
{
//Clear all textbox values
if (c is TextBox)
((TextBox)c).Text = "";
//clear all check boxes
if (c is CheckBox)
((CheckBox)c).Checked = false;
//Clear all radio buttons
if (c is RadioButton)
((RadioButton)c).Checked = false;
//Clear all radio buttons
if (c is DropDownList)
((DropDownList)c).SelectedIndex = 0;
}
} Full source code
Client side
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Clear all controls values in Webapage</title>
<script language="javascript" type="text/javascript">
function clearAll() {
var frm = document.forms[0];
for (i = 0; i < frm.elements.length; i++)
{
if (frm.elements[i].type == "checkbox") {
frm.elements[i].checked = false;
}
if (frm.elements[i].type == "radio") {
frm.elements[i].checked = false;
}
if (frm.elements[i].type == "text") {
frm.elements[i].value="";
}
if (frm.elements[i].type == "select-one") {
frm.elements[i].value=0;
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="0" cellspacing="0" width="800" align="center">
<tr>
<td height="40" colspan="2">
<h3>
<b>Clear All controls in Webpage example</b></h3>
</td>
</tr>
<tr>
<td height="40" colspan="2">
<h3><b>Employee Information</b></h3>
</td>
</tr>
<tr>
<td height="30">
Employee Name
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30">
Employee Age
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30">
Sex
</td>
<td>
<asp:RadioButton ID="radmale" runat="server" Text="Male" />
<asp:RadioButton ID="radfemale" runat="server" Text="Female" />
</td>
</tr>
<tr>
<td height="30">
Address1
</td>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30">
Address2
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30">
City
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30">
State
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td height="30">
Country
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="0">--Select--</asp:ListItem>
<asp:ListItem>Australia</asp:ListItem>
<asp:ListItem>China</asp:ListItem>
<asp:ListItem>India</asp:ListItem>
<asp:ListItem>Pakistan</asp:ListItem>
<asp:ListItem>Srilanka</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td height="30">
Favourite Color
</td>
<td>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Red" />
<asp:CheckBox ID="CheckBox2" runat="server" Text="Green" />
<asp:CheckBox ID="CheckBox3" runat="server" Text="Blue" />
<asp:CheckBox ID="CheckBox4" runat="server" Text="Maroon" /><br />
</td>
</tr>
<tr>
<td height="40" colspan="2" align="center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
<asp:Button ID="btnClear" runat="server" Text="Clear using C#"
onclick="btnClear_Click" />
<asp:Button ID="Button1" runat="server" Text="Clear using Javascript" OnClientClick="clearAll()" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>Server side
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnClear_Click(object sender, EventArgs e)
{
clear();
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
//your insert statement code here
Response.Write("Record Insert Successfully");
clear();
}
void clear()
{
//This loop takes all controls from the form1 - make sure your form name as form1 otherwise change it as per your form name
foreach (Control c in form1.Controls)
{
//Clear all textbox values
if (c is TextBox)
((TextBox)c).Text = "";
//clear all check boxes
if (c is CheckBox)
((CheckBox)c).Checked = false;
//Clear all radio buttons
if (c is RadioButton)
((RadioButton)c).Checked = false;
//Clear all radio buttons
if (c is DropDownList)
((DropDownList)c).SelectedIndex = 0;
}
}
}
Source Code Detail:
I have attached source code please download it and try it to clear all control values.
Front End : ASP.NET
Code Behind : C#
Conclusion:
I hope this article help you to know about clear all control values in a web page
Thanks a bunch. I was looking for something similar to check about 86 RadioButtonList on the page for checked values and this code has solved the issue.