JavaScript: How to find RadioButtonList inside GridView

Question

I am trying to find a RadioButtonList control inside a GridView in JavaScript.

function SetPresent(studid) {
    var container = document.getElementById("gvRollCall"); 
    var RB1 = container.getElementById("<%=RadioButtonList1.ClientID%>");
    var radio = RB1.getElementsByTagName("input");
    var label = RB1.getElementsByTagName("label");
    for (var i=0;i<radio.length;i++)
    {
       if (!radio[i].checked)
       {
           //for debugging only
           alert("SelectedText = " + label[i].innerHTML);
           alert("SelectedValue = " + radio[i].value);
       }
    }
    return false;
}

But I always get ...

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS0103: The name 'RadioButtonList1' does not exist in the current context

> Source Error:
> 
> 
> Line 142:        function SetPresent(studid) { Line 143:           
> var container = document.getElementById("gvRollCall");  Line 144:     
> var RB1 = $container.getElementById("<%=RadioButtonList1.ClientID%>");

gvRollCall is my GridView.

Why?

EDIT: GridView source

<asp:GridView ID="gvRollCall" runat="server" AllowSorting="True" AutoGenerateColumns="False" ShowFooter="True" CellPadding="4" ForeColor="#333333"
            DataSourceID="sdsSubmittedRollCall"
            OnDataBound="gvRollCall_DataBound" 
            OnDataBinding="gvRollCall_DataBinding" 
            OnRowDataBound="gvRollCall_RowDataBound">
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <Columns>
                <asp:TemplateField HeaderText="Student" SortExpression="StudentName">
                    <ItemTemplate>
                        <asp:HiddenField ID="hfStudentID" runat="server" Value='<%# Eval("StudentID") %>' />
                        <asp:HiddenField ID="hfSubmitted" runat="server" Value='<%# Eval("Submitted") %>' />
                        <a id="A1" style="color: blue; text-decoration: underline; cursor: hand; cursor: pointer;"
                           ondblclick='doDblClick("<%# Eval("StudentID") %>")'
                           onclick='doClick("<%# Eval("StudentID") %>")'
                           onmouseover='ShowPhoto("<%# Eval("StudentID") %>");'
                           onmouseout='HidePhoto();'>
                           <%# Eval("StudentName") %>
                        </a>
                    </ItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="btnSUBMIT" runat="server" OnClick="btnSUBMIT_Click" OnClientClick="return confirm('Are you sure?');" Text="SUBMIT" CausesValidation="true" />
                        <div id="divSubmitted" runat="server" visible="false">
                            <asp:Label ID="lblSubmitted" runat="server" Text="Roll Call Submitted"></asp:Label>
                        </div>
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Study Year" SortExpression="StudentStudyYear">
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Eval("StudentStudyYear") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Status">
                    <ItemTemplate>
                        <asp:Table ID="tblStatus" runat="server" CellPadding="0" CellSpacing="2">
                            <asp:TableRow runat="server">
                                <asp:TableCell>
                                    <asp:HiddenField ID="hfStatusID" runat="server" Value='<%# Eval("CheckStatusID") %>' />
                                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" CellPadding="3" 
                                        DataSourceID="sdsStatuses" DataTextField="CheckStatusName" DataValueField="CheckStatusID">
                                    </asp:RadioButtonList>
                                    <asp:SqlDataSource ID="sdsStatuses" runat="server" ConnectionString="<%$ ConnectionStrings:ATCNTV1ConnectionString %>" 
                                        SelectCommand="SELECT CheckStatusID, CheckStatusName FROM tblBoardingCheckStatus WHERE StatusActive = 1">
                                    </asp:SqlDataSource>
                                </asp:TableCell>
                                <asp:TableCell>
                                    <asp:RequiredFieldValidator ID="rfvStatus" runat="server" ControlToValidate="RadioButtonList1" ErrorMessage="Status is required" Text="*"/>
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        </asp:GridView>

And doClick() function ...

function doClick(studid){
          wsTimer = setTimeout(function(){SetPresent(studid)}, 300);
        }

Answer 1

You are cannot access RadiobuttonList placed inside Gridview Directly with this code. Assign CssClass="radioList" as below i have added in below code and the access follow list with JQuery.

<asp:RadioButtonList CssClass="radioList" ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" CellPadding="3" 
                                    DataSourceID="sdsStatuses" DataTextField="CheckStatusName" DataValueField="CheckStatusID">

Remove this line of code

var RB1 = container.getElementById("<%=RadioButtonList1.ClientID%>");

and use this one. After assign class to object, you can loop for this each object and get value as following:

function SetPresent(studid) {
$(".radioList").each(function(index, element) {
    alert($(this).find('option:selected').text());
    alert($(this).find('option:selected').val());
});
return false;}

Answer 2

I've answered it by using FireFly and inspecting the HTML properly.

<script type="text/javascript">
    var wsTimer;

    function doClick(studid){
      wsTimer = setTimeout(function(){SetPresent(studid)}, 300);
    }

    function SetPresent(studid) {
        var grid = document.getElementById("<%=gvRollCall.ClientID%>"); 
        for (var i = 1; i < grid.rows.length; i++) {
            var row = grid.rows[i];
            var table = row.getElementsByTagName("table");
            //get 2nd table object which is the radiobuttonlist
            //check if it's enabled. if not, skip as the other objects
            //are not rendered
            if (table[1].getAttribute("disabled") != "disabled") {
                //get studentID linked to this table
                var student = table[1].getAttribute('studentid');
                //does it match the student id in the function?
                if (student == studid) {
                    //get the radiobuttonlist object
                    var radio = row.getElementsByTagName("input");
                    //check the 3rd radio button which is the Present one
                    radio[3].checked = "checked";
                }
            }
         }
        return false;
    }
</script>

Clear as mud?