Category Archives: RadioButtonList

RadioButtonList

[RESOLVED]Send selected item value to JavaScript from RadioList

I have a radioList and upon checking one of the radio buttons I want to provide js with the selected item in order to do some simple hide and show of panels.

<asp:RadioButtonList id="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal" align="left" onclick="sourceType();">
                   <asp:ListItem Text="Observation/Incident/Event" ></asp:ListItem>
                   <asp:ListItem Text="Self-Assessment"></asp:ListItem>
                  <asp:ListItem Text="Internal Audit"></asp:ListItem>
                  <asp:ListItem Text="External Audit(on CE)"></asp:ListItem>
                  <asp:ListItem Text="Supplier Audit/Surveillance"></asp:ListItem>
                  <asp:ListItem Text="Customer Complaint"></asp:ListItem>
                  <asp:ListItem Text="Other"></asp:ListItem>
                </asp:RadioButtonList>
     function sourceType(){
           
             var source = document.getElementById('<%=rdlSource.ClientID%>');
                alert(source);
</script>

Source is not fetching the correct item and gets the id of the table.
this is what the page source shows me. 

<td colspan="5">
              <table id="MainContent_nestedContent_rdlSource" Name="ListSource" align="left">
	<tr>
		<td><input id="MainContent_nestedContent_rdlSource_0" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Observation/Incident/Event" /><label for="MainContent_nestedContent_rdlSource_0">Observation/Incident/Event</label></td><td><input id="MainContent_nestedContent_rdlSource_1" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Self-Assessment" /><label for="MainContent_nestedContent_rdlSource_1">Self-Assessment</label></td><td><input id="MainContent_nestedContent_rdlSource_2" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Internal Audit" /><label for="MainContent_nestedContent_rdlSource_2">Internal Audit</label></td><td><input id="MainContent_nestedContent_rdlSource_3" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="External Audit(on CE)" /><label for="MainContent_nestedContent_rdlSource_3">External Audit(on CE)</label></td><td><input id="MainContent_nestedContent_rdlSource_4" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Supplier Audit/Surveillance" /><label for="MainContent_nestedContent_rdlSource_4">Supplier Audit/Surveillance</label></td><td><input id="MainContent_nestedContent_rdlSource_5" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Customer Complaint" /><label for="MainContent_nestedContent_rdlSource_5">Customer Complaint</label></td><td><input id="MainContent_nestedContent_rdlSource_6" type="radio" name="ctl00$ctl00$MainContent$nestedContent$rdlSource" value="Other" /><label for="MainContent_nestedContent_rdlSource_6">Other</label></td>
	</tr>
</table>

Really confused, i have seen many solutions and none of them have worked out. Please help :) Thank you

You can use Jquery to get the selected value in radiobutton list.

Please try with the below code

 <asp:RadioButtonList ID="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal"
            align="left" onclick="sourceType(this);">
            <asp:ListItem Text="Observation/Incident/Event"></asp:ListItem>
            <asp:ListItem Text="Self-Assessment"></asp:ListItem>
            <asp:ListItem Text="Internal Audit"></asp:ListItem>
            <asp:ListItem Text="External Audit(on CE)"></asp:ListItem>
            <asp:ListItem Text="Supplier Audit/Surveillance"></asp:ListItem>
            <asp:ListItem Text="Customer Complaint"></asp:ListItem>
            <asp:ListItem Text="Other"></asp:ListItem>
        </asp:RadioButtonList>

JQuery Code

 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            function sourceType(rbl) {
            //Get the selected value from radiobuttonlist
                var selectedvalue = $("#" + rbl.id + " input:radio:checked").val();
                alert(selectedvalue);
            }
        </script>

if you want a pure javascript solution then you can use the below code

<script>

            function sourceType() {
            //Get the Radiobuttonlist object here
                var radioButtons = document.getElementsByName("rdlSource");
                //Loop through all items in radiobuttonlist
                for (var x = 0; x < radioButtons.length; x++) {
                //check if radiobutton is checked or not
                    if (radioButtons[x].checked) {
                    //show the value as alert
                        alert(radioButtons[x].value);
                    }
                }
            }

        </script>
        <asp:RadioButtonList ID="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal"
            align="left" onclick="sourceType();">
            <asp:ListItem Text="Observation/Incident/Event"></asp:ListItem>
            <asp:ListItem Text="Self-Assessment"></asp:ListItem>
            <asp:ListItem Text="Internal Audit"></asp:ListItem>
            <asp:ListItem Text="External Audit(on CE)"></asp:ListItem>
            <asp:ListItem Text="Supplier Audit/Surveillance"></asp:ListItem>
            <asp:ListItem Text="Customer Complaint"></asp:ListItem>
            <asp:ListItem Text="Other"></asp:ListItem>
        </asp:RadioButtonList>

Hello A2H, 
Thank you for your response. I have tried your javascript code and I seem to get the length of 0 for radioButtons.length. 

Hi TheMiniShaq,

Please try to use the following code.

    <script type="text/javascript">
        function sourceType() {
            //Get the Radiobuttonlist object here
            var radioButtons = document.getElementsByName("rdlSource");

            var RadioButtonS = document.getElementsByTagName('input');
            //Loop through all items in radiobuttonlist
            for (var x = 0; x < radioButtons.length; x++) {
                //check if radiobutton is checked or not
                if (radioButtons[x].checked) {
//show the value as alert var lbl = RadioButtonS[x + 1].parentElement.getElementsByTagName('label'); alert(lbl[0].innerHTML); } } } </script> <div> <asp:RadioButtonList ID="rdlSource" Name="ListSource" runat="server" RepeatDirection="Horizontal" align="left" onclick="sourceType();"> <asp:ListItem Text="Observation/Incident/Event" Value="0"></asp:ListItem> <asp:ListItem Text="Self-Assessment" Value="1"></asp:ListItem> <asp:ListItem Text="Internal Audit" Value="2"></asp:ListItem> <asp:ListItem Text="External Audit(on CE)" Value="3"></asp:ListItem> <asp:ListItem Text="Supplier Audit/Surveillance" Value="4"></asp:ListItem> <asp:ListItem Text="Customer Complaint" Value="5"></asp:ListItem> <asp:ListItem Text="Other" Value="6"></asp:ListItem> </asp:RadioButtonList> </div>

Best Regards,
Dillion

TheMiniShaq

Hello A2H, 
Thank you for your response. I have tried your javascript code and I seem to get the length of 0 for radioButtons.length. 

The above code is working fine for me. Looks like the issue is with how we are referring the radiobutton list control as your control is inside a contentplaceholder. Try using the control clientid to refer the radiobutton list

Please try with the below code

 <script>

            function sourceType() {
            //Get the Radiobuttonlist object here
                var radioButtons = document.getElementsByName('<%=rdlSource.ClientID%>');
                //Loop through all items in radiobuttonlist
                for (var x = 0; x < radioButtons.length; x++) {
                //check if radiobutton is checked or not
                    if (radioButtons[x].checked) {
                    //show the value as alert
                        alert(radioButtons[x].value);
                    }
                }
            }

        </script>

[RESOLVED]Alert doesn't fire on change event

The alert doesn’t fire when I click various options

<head runat="server">
    <title></title>
    <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Field2Query").change(function () {
                var isChecked = $(‘#Field2Query’).is(‘:checked’);
                if (isChecked) { alert("Test"); }
            });
        });
   
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    <asp:RadioButtonList ID="Field2Query" runat="server"
        RepeatDirection="Horizontal" RepeatLayout="Flow">
        <asp:ListItem Selected="True" Text="Description" Value="wi.item_description" />
        <asp:ListItem Text="Stock Number" Value="wi.stock_number" />
        <asp:ListItem Text="Part Number" Value="wi.part_number" />
        <asp:ListItem Text="FIC" Value="wi.FIC" />
    </asp:RadioButtonList>
    </form>
</body>
</html>

I guess you are trying to check if any items are selected in Radiobuttonlist using the above code.if that is the case then you can use the below code to acheive that functionality.

<script type="text/javascript">
        $(document).ready(function () {
            $("#Field2Query").change(function () {
                //Get the length of items selected in radiobuttonlist
                var cnt = $("#Field2Query :radio:checked").length;
                //Check if any items are selected in radiobutton list
                if (cnt == 0) {
                    //Show the message
                    alert("Please select an items");
                }
                else {
                    //Show the message
                    alert("Your have selected an item");
                }
            });
        });
    </script>

Complete Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Field2Query").change(function () {
                //Get the length of items selected in radiobuttonlist
                var cnt = $("#Field2Query :radio:checked").length;
                //Check if any items are selected in radiobutton list
                if (cnt == 0) {
                    //Show the message
                    alert("Please select an items");
                }
                else {
                    //Show the message
                    alert("Your have selected an item");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:RadioButtonList ID="Field2Query" runat="server" RepeatDirection="Horizontal"
        RepeatLayout="Flow">
        <asp:ListItem Selected="True" Text="Description" Value="wi.item_description" />
        <asp:ListItem Text="Stock Number" Value="wi.stock_number" />
        <asp:ListItem Text="Part Number" Value="wi.part_number" />
        <asp:ListItem Text="FIC" Value="wi.FIC" />
    </asp:RadioButtonList>
    </form>
</body>
</html>

This is occurring because a RadioButtonList is going to generate a <table> element with the ID that you are looking for. What you’ll want to do is actually check for any checked elements that appear below your element instead :

$(function () {
    $("#<%= Field2Query.ClientID %> :radio").change(function () {
        // This will check if any of your radio elements under that area are checked
        var isChecked = $("#<%= Field2Query.ClientID %> :radio:checked").length > 0);
        if (isChecked) { alert("Test"); }
    });
});

Hi davelewicki,

Thanks for your post.

You could modify your code as below to resolve your problem.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("#Field2Query").change(function () {
                var isChecked = $('#Field2Query :radio').is(':checked');

                if (isChecked) {
                    alert("Test");
                }
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:RadioButtonList ID="Field2Query" runat="server"
                RepeatDirection="Horizontal" RepeatLayout="Flow">
                <asp:ListItem Selected="True" Text="Description" Value="wi.item_description" />
                <asp:ListItem Text="Stock Number" Value="wi.stock_number" />
                <asp:ListItem Text="Part Number" Value="wi.part_number" />
                <asp:ListItem Text="FIC" Value="wi.FIC" />
            </asp:RadioButtonList>
        </div>
    </form>
</body>
</html> 

Regarding this issue, please post back freely.

Best Regards,

Fei Han

[RESOLVED]problem in radiobuttonlist control

hi everybody

i have problem with radiobuttonlist asp.net control

it always give me value 1 even 

this is jquery code

 $(function () {
      $('#<%=btnSave.ClientID%>').click(function (e) {
                alert($('#<%=rdChooseWay.ClientID%> input').val());
 });
 });

html code

<asp:RadioButtonList ID="rdChooseWay" runat="server">
                <asp:ListItem Value="1">New user</asp:ListItem>
                <asp:ListItem Value="2">Existing user</asp:ListItem>
            </asp:RadioButtonList>

radio button list must be chanched to 1 or 2 but it give me 1 at every time

help me please

Try this,

$( function () {
$( '#<%=btnSave.ClientID%>' ).click( function ( e ) {
alert( $( '#<%=rdChooseWay.ClientID%> input:radio:checked' ).val() );
} );
} );

Mark as Answer If its helps you..

perfect :)

thanks

[RESOLVED]HoverMenuExtender on page using ModalPopupExtender PostBackIssue

I have a page that has a simple hovermenu extending a panel with a radiobuttonlist on it (just used to toggle a setting).  The problem is that the page also implements a modalpopup that displays the results of a search.  If I click on an item in the popup,
everything works fine (popup closes, code runs, page posts back).  The problem is, after the postback caused by the popup, the hovermenu panel becomes stuck visible.

Code is below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DirectorySpyWebEdition._default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>DirectorySpy: Web Edition</title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div id="header">
            <h2>DirectorySpy
            </h2>
        </div>
        <div id="search">
            <asp:Label ID="lblSearch" runat="server" Text="Search:" CssClass="lblSearch"></asp:Label>
            <asp:TextBox ID="txtSearch" runat="server" CssClass="txtSearch" BorderStyle="Solid" Font-Bold="True" Font-Size="X-Large"></asp:TextBox>
            <asp:ImageButton ID="imgBtnSearch" runat="server" ImageUrl="~/Images/Search-icon3.png" CssClass="imgBtn" OnClick="imgBtnSearch_Click" />
        </div>
        <div id="domainSelector">
            <asp:Button ID="btnDomain" runat="server" CssClass="btnDomain" Text="Domain ▲" />
            <asp:UpdatePanel ID="updPanelDomain" runat="server" UpdateMode="Always">
                <ContentTemplate>
                    <asp:Panel ID="pnlDomain" runat="server">
                        <asp:RadioButtonList ID="rbListDomain" runat="server" CssClass="rbListDomain" >
                            <asp:ListItem Selected="True">Domain1.COM</asp:ListItem>
                            <asp:ListItem>Domain2.COM</asp:ListItem>
                        </asp:RadioButtonList>
                    </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopDelay="30" PopupControlID="pnlDomain" PopupPosition="Bottom" TargetControlID="btnDomain"></asp:HoverMenuExtender>
        </div>
        <div id="content">
            <table align="center">
                <tr>
                    <td>
                        <asp:UpdatePanel ID="updPanelGeneralTab" runat="server" UpdateMode="Always" Visible="true">
                            <ContentTemplate>
                                <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="100%">
                                    <asp:TabPanel ID="tabGeneral" runat="server" HeaderText="General">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvGeneralTab" runat="server" CssClass="grid" AutoGenerateColumns="False" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="attribute">
                                                                    <ItemStyle Width="150px" Font-Bold="True" />
                                                                </asp:BoundField>
                                                                <asp:TemplateField HeaderText="value">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="Label22" runat="server" Text='<%# Bind("value") %>'></asp:Label>
                                                                    </ItemTemplate>
                                                                </asp:TemplateField>
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabAddress" runat="server" HeaderText="Address">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvAddressTab" runat="server" CssClass="grid" AutoGenerateColumns="False" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="attribute">
                                                                    <ItemStyle Width="150px" Font-Bold="true" />
                                                                </asp:BoundField>
                                                                <asp:TemplateField HeaderText="value">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="Label23" runat="server" Text='<%# Bind("value") %>'></asp:Label>
                                                                    </ItemTemplate>
                                                                </asp:TemplateField>
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabObjectInfo" runat="server" HeaderText="Object Info">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvObjectInfoTab" runat="server" CssClass="grid" AutoGenerateColumns="False" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="attribute">
                                                                    <ItemStyle Width="150px" Font-Bold="true" />
                                                                </asp:BoundField>
                                                                <asp:TemplateField HeaderText="value">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="Label24" runat="server" Text='<%# Bind("value") %>'></asp:Label>
                                                                    </ItemTemplate>
                                                                </asp:TemplateField>
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabExchange" runat="server" HeaderText="Exchange">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvExchangeTab" runat="server" CssClass="grid" AutoGenerateColumns="False" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="attribute">
                                                                    <ItemStyle Width="150px" Font-Bold="true" />
                                                                </asp:BoundField>
                                                                <asp:TemplateField HeaderText="value">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="Label24" runat="server" Text='<%# Bind("value") %>'></asp:Label>
                                                                    </ItemTemplate>
                                                                </asp:TemplateField>
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabProxyAddresses" runat="server" HeaderText="Proxy Addresses">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvProxyAddressesTab" runat="server" AutoGenerateColumns="False" CssClass="grid" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="proxyAddress" />
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabRestrictions" runat="server" HeaderText="Restrictions">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvRestrictionsTab" runat="server" AutoGenerateColumns="False" CssClass="grid" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="authOrig" />
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabMembers" runat="server" HeaderText="Members">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvMembersTab" runat="server" AutoGenerateColumns="False" CssClass="grid" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="member" />
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabMemberOf" runat="server" HeaderText="Member Of">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvMemberOfTab" runat="server" AutoGenerateColumns="False" CssClass="grid" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="memberOf" />
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabManagerOf" runat="server" HeaderText="Manager Of">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td>
                                                        <asp:GridView ID="gvManagerOfTab" runat="server" AutoGenerateColumns="False" CssClass="grid" ShowHeader="False">
                                                            <Columns>
                                                                <asp:BoundField DataField="managedObjects" />
                                                            </Columns>
                                                        </asp:GridView>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                    <asp:TabPanel ID="tabPhoto" runat="server" HeaderText="Photo">
                                        <ContentTemplate>
                                            <table class="tabTable">
                                                <tr>
                                                    <td align="center">
                                                        <asp:Image ID="thumbnailPhoto" runat="server" ImageUrl="~/Images/sil_med.png" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </asp:TabPanel>
                                </asp:TabContainer>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
            </table>
        </div>
        <div id="footer">
        </div>
        <!-- Search Popup -->
        <asp:Button ID="popupSearchTargetControl" runat="server" Style="display: none" />
        <asp:ModalPopupExtender ID="popupSearch" runat="server" BackgroundCssClass="modalBackground" TargetControlID="popupSearchTargetControl" PopupControlID="pnlPopupSearch" BehaviorID="bPopupSearch"></asp:ModalPopupExtender>
        <asp:Panel ID="pnlPopupSearch" runat="server" CssClass="popupSearch">
            <asp:UpdatePanel ID="updPanelPopupSearch" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <table id="tblPopupSearchHeader" align="center" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td style="border-bottom: solid; border-width: 3px; background-color: #c8332e; color: white; font-family: 'Cordia New'; border-bottom-color: black;" align="left">
                                <div style="padding-left: 10px; font: bold; font-size: large;">
                                    Search Results:<asp:Label ID="lblPopupSearchHeader" runat="server"></asp:Label>
                                </div>
                            </td>
                            <td align="right" style="background-color: #c8332e; color: white; border-bottom: solid; border-bottom-color: black; border-width: 3px; vertical-align: bottom;">
                                <asp:Button ID="Button2" runat="server" BackColor="Black" BorderStyle="None" ForeColor="White" Height="25px" OnClientClick="$find('bPopupSearch').hide(); return false;" Text="X" Width="25px" />
                            </td>
                        </tr>
                    </table>
                    <table width="100%">
                        <tr>
                            <td>
                                <asp:GridView ID="gvSearchResults" runat="server" AutoGenerateColumns="False" Font-Names="Cordia New" AllowPaging="True" Width="100%" OnPageIndexChanging="gvSearchResults_PageIndexChanging" CssClass="searchResultsGrid" OnRowCommand="gvSearchResults_RowCommand">

                                    <Columns>
                                        <asp:TemplateField HeaderText="cn">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "cn") %>' CommandArgument='<%# DataBinder.Eval(Container.DataItem, "adsPath") %>' CommandName="loadObject"></asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="objectClass">
                                            <ItemTemplate>
                                                <asp:Label ID="Label18" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "objectClass") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="sAMAccountName">
                                            <ItemTemplate>
                                                <asp:Label ID="Label19" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "sAMAccountName") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="physicalDeliveryOfficeName">
                                            <ItemTemplate>
                                                <asp:Label ID="Label20" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "physicalDeliveryOfficeName") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="adsPath" Visible="False">
                                            <ItemTemplate>
                                                <asp:Label ID="Label21" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "adsPath") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                    <PagerSettings Mode="NumericFirstLast" />
                                </asp:GridView>
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <!-- Empty Search Results Panel-->
        <asp:Button ID="popupNoSearchResultsTargetControl" runat="server" Style="display: none" />
        <asp:ModalPopupExtender ID="popupNoSearchResults" runat="server" BackgroundCssClass="modalBackground" TargetControlID="popupNoSearchResultsTargetControl" PopupControlID="pnlPopupNoSearchResults" BehaviorID="bPopupNoSearchResults"></asp:ModalPopupExtender>
        <asp:Panel ID="pnlPopupNoSearchResults" runat="server" CssClass="popupNoSearchResults">
            <asp:UpdatePanel ID="updPanelPopupNoSearchResults" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <table id="tblPopupNoSearchResultsHeader" align="center" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td style="border-bottom: solid; border-width: 3px; background-color: #c8332e; color: white; font-family: 'Cordia New'; border-bottom-color: black;" align="left">
                                <div style="padding-left: 10px; font: bold; font-size: large;">
                                    Search Results:<asp:Label ID="lblPopupNoSearchResultsHeader" runat="server"></asp:Label>
                                </div>
                            </td>
                            <td align="right" style="background-color: #c8332e; color: white; border-bottom: solid; border-bottom-color: black; border-width: 3px; vertical-align: bottom;">
                                <asp:Button ID="Button1" runat="server" BackColor="Black" BorderStyle="None" ForeColor="White" Height="25px" OnClientClick="$find('bPopupNoSearchResults').hide(); return false;" Text="X" Width="25px" />
                            </td>
                        </tr>
                    </table>
                    <table width="100%">
                        <tr>
                            <td>

                            </td>
                        </tr>
                        <tr>
                            <td align="center" style="font-family:'Cordia New';">
                                <asp:Label ID="Label1" runat="server" Text="No objects found..." Font-Size="X-Large"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>

                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <asp:Button ID="btnCloseNoResultsPopup" runat="server" CssClass="btn" Text="Close" OnClick="btnCloseNoResultsPopup_Click" />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>

    </form>
</body>
</html>

Well… I had an idea… after a day of scratching my head (should have noticed earlier).  I resolved the issue by wrapping the page in an updatepanel (everything between the form tags).

[RESOLVED]Javascript Validation on Radio Button. Please Help !!

Hello,

I have been working on this code for so long now and I just cant get my radio buttons to validate properly.

Basically what I want to do is have 2 or more radio button options, and the javascript validation (client side) will make sure that at least one option is selected.

Here is what I have.(obviously inside a function, along with other validations which are working).

SCRIPT=

var radioButtons = document.getElementsByName("transmission");
for (var x = 0; x < radioButtons.length; x++) {
if (radioButtons[x].checked) {
 alert("You Selected a Transmission. Thankyou."); }
else {
alert("Please select a transmission!"); }
}

//and then inside the the html I have a radio button list (using asp:)

               <asp:RadioButtonList ID="transmission" runat="server">
                <asp:ListItem Text="Automatic" Value="1"></asp:ListItem>
                <asp:ListItem Text="Manual" Value="1"></asp:ListItem>
              </asp:RadioButtonList>

//---

//when i select nothing (and click submit which activates the validate function) I get 3 messages saying Please select a transmission. I only want 1, why do I get 3? What do I have to remove
//from my code? And then when I do add some thing I get the 1 message saying transmission picked, thanks. But I still get 2 erros messages asking for transmission selection.
//I assume maybe an error with the for loop? ALl other techniques I have attempted have failed. Please help.

//Much appreciated!

Hello,

There are so many problems in your code.

tiiimmmy

Basically what I want to do is have 2 or more radio button options, and the javascript validation (client side) will make sure that at least one option is selected.

You can select ONLY one of the radio buttons. That’s the deafult behaviour of radio buttons. If you need multiple options to be selected, you should use checkboxes.

tiiimmmy

for (var x
= 0; x
< radioButtons.length; x++)
{

You are inside a loop but you aren’t breaking the loop at any point. So it goes until all the radioButtons are processed.

If you can elaborate your question more clearly and say exactly what is your requirement, I may be able to help you :)

sorry! What I mean Is I need to make sure at least one selection is picked, as in it cannot be left blank.

any idea why I get the alert message for each list item?

Hi,

I created a sample app for you which demonstrate on how to do it. Please have a look at it. :) I think you can understand what are the changes I’ve done and why I’ve done that changes. If not, please feel free to ask.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>

<!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></title>
    <script>
        function test() {
            var radioButtons = document.getElementsByName("transmission");

            for (var x = 0; x < radioButtons.length; x++) {
                if (radioButtons[x].checked) {
                    alert("You Selected a Transmission. Thankyou.");
                    break;
                }

                else {
                    if (x == (radioButtons.length - 1))
                        alert("Please select a transmission!");
                }
            }
        }
    </script>
</head>
<body style="overflow: hidden">
    <form id="form1" runat="server">
    <asp:RadioButtonList ID="transmission" runat="server">
        <asp:ListItem Text="Automatic" Value="1"></asp:ListItem>
        <asp:ListItem Text="Manual" Value="1"></asp:ListItem>
    </asp:RadioButtonList>
    <asp:Button ID="btnApply" OnClientClick="test();" runat="server" Text="Apply"></asp:Button>
    </form>
</body>
</html>

Thank you so much!! I see the changes you made, I cant believe it was so simple :D

You are a champ!! Thanks again, really appreicate it!!

Also I have a query about a drop down list validation, should I post it in here or start a new thread??

tiiimmmy

Thank you so much!!

You are very welcome.

tiiimmmy

I see the changes you made, I cant believe it was so simple :D

I knew you could understand that yourself. That’s why I didn’t bother explaining it :D

tiiimmmy

Also I have a query about a drop down list validation, should I post it in here or start a new thread??

Start a new thread please. In that way, anyone who is looking at the threads can get help too.

[RESOLVED]How do show load in progress for a radiobuttonlist selection change?

I am using a radiobuttonList, when change selection, it takes sometime. I want to show a load in progress image while the change is in progress, what’s the best way to do it? I tried to add a div and runat="server", then in the beginning of the indexchange
add style display:block, at the end put display:none.

Didn’t work. I used updatepanel and updateprogress, didn’t work either. Can some one tell me a good way to do it?

Thanks.

[RESOLVED]Validation inside Accordian Pane

I have a panel which has an Accordian pane which contains a RadioButtonList. Inside this pane i also have a RequiredFieldValidator to ensure at least one option has been selected from the RadioButtonList. I also have a button inside another panel.

The problem i have is if the RFV is inside the Accordian pane and the button is clicked the RFV fires but the pane does not expand to display the error.

If i have the RFV outside of the panel then i get the error message that it cant find the RadioButtonList.

If i write some code in code behind to create the RFV in code and run it at form load then i still have the error that it cant find the RadioButtonList.

Could anyone advise how to go about this please?

Heres a sample of my code

<asp:ScriptManager ID="sm" runat="server">
    </asp:ScriptManager>
    
    <asp:Panel ID="pnlDeptOptions" runat="server">
    <div style="padding10px;">
        <asp:Accordion ID="acDept" runat="server" HeaderCssClass="Header" HeaderSelectedCssClass="SelectedHeader">
            <Panes>
                <asp:AccordionPane ID="acOne" runat="server">
                    <Header>
                        Departments</Header>
                    <Content>
                    <div style="font-size:smallcolor:Blackmargin5px;">
                        <asp:RadioButtonList runat="server" ID="rblDepartment">
                            <asp:ListItem Text="Admin"></asp:ListItem>
                            <asp:ListItem Text="IT"></asp:ListItem>
                            <asp:ListItem Text="HR"></asp:ListItem>
                            <asp:ListItem Text="Marketing"></asp:ListItem>
                        </asp:RadioButtonList></div>
                    </Content>
                </asp:AccordionPane>
.............
.......
    <asp:Panel ID="pnlValidation" runat="server">
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ErrorMessage="Please select a department" ControlToValidate="rblDepartment" ValidationGroup="Dept"></asp:RequiredFieldValidator>
    </asp:Panel>

You might want to use a ValidationSummary control in much the same way as in this thread:

http://forums.asp.net/t/1844413.aspx/1?Positioning+in+problematic+tab+when+validating+form+in+MVC3+and+Razor

[RESOLVED]Show and hide textboxes when a radiobuttonlist option is selected

I have groups of textboxes and radiobuttonlist. The radiobuttonlist has several options. I want to show and hide textboxes depending on the selected radiobutton. This isn’t too hard but I’m not sure how to do this with multiple groups. The html example below
has groups in separate tables. This will all end up in a gridview with 1 to many groups. I want to create a simple jQuery function that will show and hide textboxes same group as the radiobutton. Please advice/

radio button value 1 = txt1 show() others hide()
radio button value 2 = txt2 show() others  hide()
radio button value 3 = txt3 show() others  hide()
radio button value 4 = txt4 show() others  hide()

 <table width="100%" class="remark">
  <tr>
   <td>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="txt1" Text="Evaluator Remarks" />
    <asp:TextBox ID="TextBox2" runat="server" CssClass="txt2" Text="Reviewer1 Remarks" />
    <asp:TextBox ID="TextBox3" runat="server" CssClass="txt3" Text="Reviewer2 Remarks" />
    <asp:TextBox ID="TextBox4" runat="server" CssClass="txt4" Text="Approver Remarks"/>
   </td>
 </tr>
 <tr>
  <td>
   <asp:RadioButtonList ID="RadioButtonList6" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem Selected="True" Value="1">Evaluator</asp:ListItem>
   <asp:ListItem Value="2">Reviewer 1</asp:ListItem>
   <asp:ListItem Value="3"> Reviewer 2</asp:ListItem>
   <asp:ListItem Value="4">Approver</asp:ListItem>
   </asp:RadioButtonList>
  </td>
 </tr>
</table>
<table width="100%" class="remark">
  <tr>
   <td>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="txt1" Text="Evaluator Remarks" />
    <asp:TextBox ID="TextBox2" runat="server" CssClass="txt2" Text="Reviewer1 Remarks" />
    <asp:TextBox ID="TextBox3" runat="server" CssClass="txt3" Text="Reviewer2 Remarks" />
    <asp:TextBox ID="TextBox4" runat="server" CssClass="txt4" Text="Approver Remarks"/>
   </td>
 </tr>
 <tr>
  <td>
   <asp:RadioButtonList ID="RadioButtonList6" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem Selected="True" Value="1">Evaluator</asp:ListItem>
   <asp:ListItem Value="2">Reviewer 1</asp:ListItem>
   <asp:ListItem Value="3"> Reviewer 2</asp:ListItem>
   <asp:ListItem Value="4">Approver</asp:ListItem>
   </asp:RadioButtonList>
  </td>
 </tr>
</table>
<table width="100%" class="remark">
  <tr>
   <td>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="txt1" Text="Evaluator Remarks" />
    <asp:TextBox ID="TextBox2" runat="server" CssClass="txt2" Text="Reviewer1 Remarks" />
    <asp:TextBox ID="TextBox3" runat="server" CssClass="txt3" Text="Reviewer2 Remarks" />
    <asp:TextBox ID="TextBox4" runat="server" CssClass="txt4" Text="Approver Remarks"/>
   </td>
 </tr>
 <tr>
  <td>
   <asp:RadioButtonList ID="RadioButtonList6" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem Selected="True" Value="1">Evaluator</asp:ListItem>
   <asp:ListItem Value="2">Reviewer 1</asp:ListItem>
   <asp:ListItem Value="3"> Reviewer 2</asp:ListItem>
   <asp:ListItem Value="4">Approver</asp:ListItem>
   </asp:RadioButtonList>
  </td>
 </tr>
</table>

<input type="radio" name="radio1" value="something">something

<input type="radio" name="radio2" value="somethingElse">somethingElse

<asp:TextBox id="TextBox1" runat="server" class="tb1" />

<asp:Textbox id="TextBox2" runat="server" class="tb2" />

if ($('.radio1').is(':checked')) {

      $('.tb1').show();

      $('.tb2').hide();

}

Your example is great for one group. Is there an easy way to do the same with multiple groups? I will not know how many groups of radio and textbox combo there will be on the page.

[RESOLVED]Loop through dynamically created controls to retrieve control ID and selected value

I need to loop through an unknown number of dynamically created controls (they could include a dropdownlist, radiobuttonlist, checkbox or a textbox), and retrieve the control ID and selected value / text / checked / option etc

They are all contained within a DIV, is this the correct / most efficient syntax to use?

$(‘#mydiv’).children().each(function () {

    switch ($(this).tagName) {
        case ‘SELECT’:
            var ID = $(this).id;
            var SelectedValue = $(this).val();
            break;
        case ‘INPUT’:
            var ID = $(this).id;
            var SelectedValue = $(this).val();
            break;
    }
});

Any help really appreciated!

well you can use jquery:

$(‘#mydiv :input).each(function() {
    var $this = $(this);
    var id = $this.attr(‘id’);
    var value = $this.is(‘:radio,:checkbox’) ? $this.is(‘:checked’) : $this.val();
}

of course this will not work very well for abstract controls like a checklist or radio list, which are really spans, with children checkbox, or radio with the same name. 

 

Input controls can be of TYPE = TEXT, RADIO, CHECKBOX, BUTTON.

Apart from INPUT and SELECT controls, there is a TEXTAREA for multiline text.

LABEL is rendered as SPAN

ListBox and DropDownList is rendered as SELECT, the difference being in SIZE attribute.

For the HTML rendered by few ASP.NET controls, please check this post:

http://blogs.dotnetkicks.com/vijayst/2011/09/html-rendering-asp-net-controls/

 

[RESOLVED]Access controls that are inside TabContainer using JavaScript

Hello,

My requirements is:

I am using TabContainer in my asp.net web page, (I need TabContainer here, since I have more options).

I have a simple asp.net Calendar control inside the TabContainer,

The user clicks on a date in the Calendar control and a Modal popup Extender control will pop up,

The Modal Popu Extender control will have a radio button list with options, Red, Green, Yellow.

When the user selects one of those colors and clicks on Ok button.

The background color of the date that the user actually clicked on should be changed to the Color that he chose in the Popup.

I was trying to do it in the Java Script, but I could not access the calendar in the JavaScript:

My code is below:

I am getting Java Script error:

Microsoft JScript runtime error: Object expected

at the line var z = $find("calSafety"); alter(z);  highlighted below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<!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></title>
    <link href="StyleSheets/Styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript">
        function xyz() {
        var z = $find("calSafety"); alter(z);         }
    </script>
</head>
<body>
    <form id="frmCalendar" runat="server">
        <ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"
            EnableHistory="true" EnablePartialRendering="true" EnablePageMethods="true">
        </ajax:ToolkitScriptManager>
        <table id="tblCal" width="100%">
            <tr>
                <td>
                    <ajax:TabContainer ID="tcCalendar" runat="server">
                        <ajax:TabPanel ID="tpSafety" runat="server">
                        <HeaderTemplate>Safety</HeaderTemplate>
                        <ContentTemplate>
                            <asp:calendar id="calSafety" runat="server"
                                BackColor="White" BorderColor="White"
                                BorderWidth="1px" Font-Names="Verdana"
                                Font-Size="9pt" ForeColor="Black"
                                Height="430px" NextPrevFormat="FullMonth" Width="670px"
                                ondayrender="calSafety_DayRender"
                                onselectionchanged="calSafety_SelectionChanged">
                            <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                            <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
                            <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"
                                VerticalAlign="Bottom" />
                            <OtherMonthDayStyle ForeColor="#999999" />
                            <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px"
                                Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
                            <TodayDayStyle BackColor="#CCCCCC" />
                            <WeekendDayStyle BackColor="Gray"></WeekendDayStyle>
                            </asp:calendar>
                             <ajax:modalpopupextender id="mpe"
                                        TargetControlID="calSafety"
                                        PopupControlID="pnlResult"
                                        Enabled="True"
                                        runat="server"/>
                        </ContentTemplate>
                        </ajax:TabPanel>
                        <ajax:TabPanel ID="tpQuality" runat="server">
                        <HeaderTemplate>Quality</HeaderTemplate>
                        <ContentTemplate>
                             <asp:calendar id="calQuality" runat="server"
                                BackColor="White" BorderColor="White"
                                BorderWidth="1px" Font-Names="Verdana"
                                Font-Size="9pt" ForeColor="Black"
                                Height="430px" NextPrevFormat="FullMonth" Width="670px">
                             </asp:calendar>
                        </ContentTemplate>
                        </ajax:TabPanel>
                        <ajax:TabPanel ID="tp5S" runat="server">
                        <HeaderTemplate>5S</HeaderTemplate>
                        <ContentTemplate>
                             <asp:calendar id="cal5S" runat="server"
                                BackColor="White" BorderColor="White"
                                BorderWidth="1px" Font-Names="Verdana"
                                Font-Size="9pt" ForeColor="Black"
                                Height="430px" NextPrevFormat="FullMonth" Width="670px">
                             </asp:calendar>
                        </ContentTemplate>
                        </ajax:TabPanel>
                    </ajax:TabContainer>
                </td>
            </tr>
            <tr>
                <td align="center">
                   <asp:label id="lblPer" runat="server"></asp:label>%
                </td>
            </tr>
            
            <tr>
                <td>
                 <asp:Panel id="pnlResult" runat="server" width="150px" height="150px" BackColor="#5D7B9D">
                        <table class="tableborder1" width="100%" height="100%">
                            <tr>
                                <td valign="middle">
                                    <asp:radiobuttonlist id="rbResult" runat="server">
                                        <asp:ListItem Value="Yes">Yes</asp:ListItem>
                                        <asp:ListItem Value="No">No</asp:ListItem>
                                        <asp:ListItem Value="NA">N/A</asp:ListItem>
                                    </asp:radiobuttonlist>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <asp:Button ID="btnOK" runat="server"
                                        Text="Done" EnableViewState="False" onclick="btnOK_Click"
                                        CausesValidation="False" CssClass="smallbutton"
                                        UseSubmitBehavior="False" />&nbsp;
                                    <asp:Button ID="btnCancel" runat="server" Text="Cancel"
                                        EnableViewState="False" CssClass="smallbutton"/>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td><asp:hiddenfield id="hfResult" runat="server"></asp:hiddenfield>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Here is the code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Calendar : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
  
    protected void calSafety_DayRender(object sender, DayRenderEventArgs e)
    {

        CalendarDay d = ((DayRenderEventArgs)e).Day;
        TableCell c = ((DayRenderEventArgs)e).Cell;

        if (e.Day.IsSelected)
        {
            //e.Cell.BackColor = System.Drawing.Color.Green;
            //c.Controls.Add(new LiteralControl(hfResult.Value));
            //c.Controls.Add(new LiteralControl("Test"));
        }

        //if (!d.IsOtherMonth)
        //    c.Controls.Add(new LiteralControl("Test"));
    }

    protected void calSafety_SelectionChanged(object sender, EventArgs e)
    {
        //
    }

    protected void btnOK_Click(object sender, EventArgs e)
    {
        hfResult.Value = rbResult.SelectedValue.ToString();
        //calSafety.DayRender += new DayRenderEventHandler(calSafety_DayRender);
        ClientScript.RegisterStartupScript(this.GetType(), "Copy2PopUp", "xyz();", true);
    }
}

Your ideas or suggestions will be greatly appreciated.

Thank you!

My only ideas is that the $find function is unable to access the "calSafety" element due to the function being called prior to the calendar (calSafety) being initialized. You may want to ensure the function is not being executed until after the page loads.

You may want to try using one of the following:

function()
{
    var z = $find("calSafety"); alter(z);
}

or

window.onload = function()
{
    var z = $find("calSafety"); alter(z);
}