Advertisements

Archive

Posts Tagged ‘textbox validation using javascript’

How to access all types of server controls in ASP.Net using Javscript/JQuery OR Clear all server controls values using javascript or Jquery


How to access server side controls in ASP.Net using Javascript/JQuery

Using client side script such as JavaScript and Jquery, we can access all server side controls from ASPX page and it will get more performance on web application as it is not causing post back. While development we are frequently facing a feature to implement that “Clear All” function in the ASPX page. Suppose in a User Entry form, most probably there will be having a button for clear all values that user was trying to enter previously.

Get all textboxes, radio buttons and checkboxes  in an ASPX page from JavaScript

To access all server side textbox controls in an aspx page using JavaScript, we have to find all controls with tag name is input and type is text. Below mentioned code will access all textboxes in a aspx page from JavaScript and clear those values to empty. The type of the radio button is ‘radio’ and checkbox is ‘checkbox’.

        var elements = document.getElementsByTagName("input");
            for (var ii = 0; ii < elements.length; ii++) {
                if (elements[ii].disabled == false) {
                    if (elements[ii].type == "text") {
                        elements[ii].value = "";
                    }
                    if (elements[ii].type == "radio") {
                        elements[ii].checked = false;
                    }
                    if (elements[ii].type == "checkbox") {
                        elements[ii].checked = false;
                    }
                }
            }

Image

How to access dropdown list control in an ASPX Page using Javscript/JQuery

The tagname for the dropdownlist and listbox controls in an aspx page is ‘select’. We can access all dropdown list in a aspx page by checking tagname of each controls as same as below sample code.

var select = document.getElementsByTagName("select");
            var length = select.length;
            for (i = 0; i < length; i++) {
                for (var j = 0; j < select[i].length; j++) {
                    select[i][j].selected = false;
                }
            }

A simple example for accessing all server controls in an aspx page from javscript/jquery

We are demonstrating a sample web page containing different server controls like textbox, dropdownlist, checkbox, radiobutton, listbox etc.. and clearing all this values to default by using javscript/jquery. Here we are accessing all serverside controls without knowing their ids and names.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”JqueryValidation.aspx.cs”

Inherits=”ExperimentLab.JqueryValidation” %>

<!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 server controls using Javascript</title>
    <style type="text/css">
        h1
        {
            font-style: italic;
            font-weight: bold;
            color: Gray;
            font-size: small;
            text-decoration: underline;
        }
        body
        {
            color: Purple;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border: 1px solid black; padding: 20px; width: 60%;">
        <table>
            <tr>
                <td>
                    <h1>
                        TextBoxes</h1>
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Age
                </td>
                <td>
                    <asp:TextBox ID="txtAge" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    <h1>
                        Dropdown Lists</h1>
                </td>
            </tr>
            <tr>
                <td>
                    Gender
                </td>
                <td>
                    <asp:DropDownList ID="ddlGender" runat="server" Width="150">
                        <asp:ListItem Text="Select" Value="0"></asp:ListItem>
                        <asp:ListItem Text="Male" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Female" Value="2"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    Religion
                </td>
                <td>
                    <asp:DropDownList ID="DropDownList1" runat="server" Width="150">
                        <asp:ListItem Text="Select" Value="0"></asp:ListItem>
                        <asp:ListItem Text="Muslim" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Christian" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Hindu" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Others" Value="4"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <h1>
                        Radio Button Lists</h1>
                </td>
            </tr>
            <tr>
                <td>
                    Nationality
                </td>
                <td>
                    <asp:RadioButtonList ID="rdNationality" runat="server">
                        <asp:ListItem Text="India" Value="0" />
                        <asp:ListItem Text="Other" Value="1" />
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr>
                <td>
                    <h1>
                        Checkbox Lists</h1>
                </td>
            </tr>
            <tr>
                <td>
                    Languages Known
                </td>
                <td>
                    <asp:CheckBoxList ID="chkLanguages" runat="server">
                        <asp:ListItem Text="Malayalam" Value="0" />
                        <asp:ListItem Text="English" Value="1" />
                        <asp:ListItem Text="Spanish" Value="2" />
                    </asp:CheckBoxList>
                </td>
            </tr>
            <tr>
                <td>
                    <h1>
                        Listbox</h1>
                </td>
            </tr>
            <tr>
                <td>
                    Technical Skills
                </td>
                <td>
                    <asp:ListBox ID="lstSkills" runat="server" SelectionMode="Multiple" Width="150">
                        <asp:ListItem Text="ASP.Net" Value="1" />
                        <asp:ListItem Text="SQL Server" Value="2" />
                        <asp:ListItem Text="MVC" Value="3" />
                        <asp:ListItem Text="JQuery" Value="4" />
                        <asp:ListItem Text="Javscript" Value="5" />
                        <asp:ListItem Text="MySQL" Value="6" />
                    </asp:ListBox>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button runat="server" ID="btnClick" Text="Clear All"
                    OnClientClick="clearAllServerFields();" />
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" language="javascript">
        function clearAllServerFields() {

            //Code for accessing all dropdown lists and listboxes in an aspx page
            var select = document.getElementsByTagName("select");
            var length = select.length;
            for (i = 0; i < length; i++) {
                for (var j = 0; j < select[i].length; j++) {
                    select[i][j].selected = false;
                }
            }

            var elements = document.getElementsByTagName("input");
            for (var ii = 0; ii < elements.length; ii++) {
                if (elements[ii].disabled == false) {
                    //Code for accessing all textboxes in an aspx page
                    if (elements[ii].type == "text") {
                        elements[ii].value = "";
                    }
                    //Code for accessing all radio buttons in an aspx page
                    if (elements[ii].type == "radio") {
                        elements[ii].checked = false;
                    }
                    //Code for accessing all checkboxes in an aspx page
                    if (elements[ii].type == "checkbox") {
                        elements[ii].checked = false;
                    }
                }
            }
        }

    </script>
    </form>
</body>
</html>
Advertisements
%d bloggers like this: