使用javascript在gridview中验证radiobuttonlist

时间:2011-02-10 16:19:01

标签: javascript asp.net

我正在尝试验证是否已选择每个radiobuttonlist。 radiobuttonlist是从sql数据库动态创建的。以下行错误“if(MyRadio [j] .checked){”,错误“已检查”为空或不是对象“。以下是代码。谢谢

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
    <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="ajax__myTab" Width="100%" ScrollBars="Horizontal">
        <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="" Enabled="true">
            <HeaderTemplate>Main</HeaderTemplate>
            <ContentTemplate>
                <table cellpadding="3" cellspacing="1">
                    <tr>
                        <td style="text-align: right">Audit Status:</td>
                        <td>
                            <asp:DropDownList ID="ddlAuditStatus" runat="server">
                                <asp:ListItem>InProgress</asp:ListItem>
                                <asp:ListItem>Completed</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="" Enabled="true">
            <HeaderTemplate>Questions</HeaderTemplate>
            <ContentTemplate>
                <asp:GridView ID="GridViewQuestions" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="5" CellSpacing="1" DataKeyNames="Pkey" DataSourceID="SqlDataSource1" ForeColor="Black" GridLines="Vertical">
                    <FooterStyle BackColor="#CCCCCC" />
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label ID="lblQuestion" runat="server"></asp:Label>
                                <asp:HiddenField ID="hdnPkey" runat="server" Value='<%# Bind("Pkey") %>' />
                                <asp:HiddenField ID="hdnRequiresAnAnswer" runat="server" Value='<%# Bind("RequiresAnAnswer") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Answer">
                            <ItemTemplate>
                                <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" Visible="false">
                                    <asp:ListItem>Yes</asp:ListItem>
                                    <asp:ListItem>No</asp:ListItem>
                                    <asp:ListItem>N/A</asp:ListItem>
                                </asp:RadioButtonList>
                            </ItemTemplate>
                            <HeaderStyle Width="130px" />
                            <ItemStyle Width="130px" />
                        </asp:TemplateField>
                    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="Silver" Font-Bold="True" ForeColor="Black" />
                    <AlternatingRowStyle BackColor="#CCCCCC" />
                </asp:GridView>
            </ContentTemplate>
        </cc1:TabPanel>
    </cc1:TabContainer>
<script type="text/javascript">

    function fcnUpdateMain() {

        var MyStatus = document.getElementById("<%=ddlAuditStatus.ClientID%>").value
        var grid = document.getElementById("<%= GridViewQuestions.ClientID %>");

        if (grid.rows.length > 0) {

            for (i = 2; i < grid.rows.length + 1; i++) {

                if (i < 10) {
                    i = "0" + i
                } else {
                    i = i
                }

                var MyReqAnswer = document.getElementById("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel2_GridViewQuestions_ctl" + i + "_hdnRequiresAnAnswer").value
                var MyRadio = document.getElementById("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel2_GridViewQuestions_ctl" + i + "_RadioButtonList1")

                if (MyStatus == "Completed") {

                    if (MyReqAnswer == "Yes") {

                        var options = document.getElementsByTagName("input")
                        for( x = 0; x < options.length; ++x ) {
                            if(options[x].type == "radio") {

                                 for (var j = 0; j < MyRadio.length; j++) {
                                    if (MyRadio[j].checked) {
                                    } else {
                                        alert("You must select an answer for all questions.")
                                        document.getElementById("ctl00_ContentPlaceHolder2_TabContainer1_TabPanel2_GridViewQuestions_ctl" + i + "_ddlProductInterest").focus()
                                        return false;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</script>

1 个答案:

答案 0 :(得分:1)

我认为您已经意识到RadioButtonList控件呈现为<table>,每个单选按钮在该表中为<input>。因此,获取RadioButtonList1的句柄并尝试使用MyRadio[j]作为数组访问它是行不通的。

我认为以下几行:

var options = document.getElementsByTagName("input")

应改为:

var options = MyRadio.getElementsByTagName("input")

这将只为您提供RadioButtonList控件中的输入标记集合,而不是页面上的所有输入标记。有了该选项集后,您不需要再次引用RadioButtonList控件。

据我所知,这比你所拥有的大大简化,但这里有一个例子:

<form runat="server">
<asp:RadioButtonList runat="server" id="RadioButtonList1">
    <asp:ListItem>Yes</asp:ListItem>
    <asp:ListItem>No</asp:ListItem>
    <asp:ListItem>N/A</asp:ListItem>
</asp:RadioButtonList>
<input type="button" onclick="fcnUpdateMain()" value="Click" />
<script type="text/javascript">

    function fcnUpdateMain()
    {
        var MyRadio = document.getElementById("<%=RadioButtonList1.ClientID%>")
        var options = MyRadio.getElementsByTagName("input")
        var somethingChecked = false;
        for( x = 0; x < options.length; ++x )
        {
            if (options[x].checked)
            {
                somethingChecked = true;
            }
        }
        if (!somethingChecked)
        {
            alert("You must select an answer for all questions.")
            return false;
        }
    }
</script>
</form>