1

我在 asp.net 3.5 中有一个表单，它有一个母版页和一个子页（内容页）。表单有几个问题，我使用 asp.net 复选框列表来回答问题，因为可以选择多个选项，如果用户在其中一个选项上选择“其他”，那么他们必须在文本框字段中输入数据。

我制作了以下客户端javascript来验证这一点，但是代码似乎没有检查是否选择了其他选项值，我相信它与html在页面上呈现的方式有关，，，

你能建议如何做到这一点吗？

提前致谢。

渲染的 Javascript

//Here I am trying to get the text property of the label rendered for the texbox
// and set my validation arguments
<script language='javascript' type='text/javascript'>


    function checkOther2(oSrc, args) {
        {
            var elementRef =
document.getElementById('ctl00_Content_CheckBoxList1');
            var checkBoxArray = elementRef.getElementsByTagName('input');
            var checkedValues = '';

            for (var i = 0; i < checkBoxArray.length; i++) {
                var checkBoxRef = checkBoxArray[i];

                if (checkBoxRef.checked == true) {


                    // You can only get the Text property, which
    will be in an HTML label element.


                    var labelArray =
checkBoxRef.parentNode.getElementsByTagName('label');

                    if (labelArray.length > 0) {
                        if (checkedValues.length > 0)
                            checkedValues += ',';

                        checkedValues += labelArray[0].innerHTML.text;

                        if (checkedValues == 'Other') {
                            args.IsValid = !(args.Value == "")
                            // test 
                            alert("Hello");
                        }
                    }
                    else {
                        args.IsValid = true;
                    }

                }
            }
        }
    }




// HTML Rendered


           <tr>
               <td style="height: 20px">
                   &nbsp;</td>
           </tr>
           <tr>
               <td style="font-weight: 700">
                   2.- What did you like most about working here?<strong>
                   Check all that apply
                   <span id="ctl00_Content_CheckBoxListValidator1"
style="color:Red;display:none;"></span>
                   </strong><br /> </td>
           </tr>
           <tr>
               <td>


                   <table id="ctl00_Content_CheckBoxList1"
class="myradioButton" border="0">
            <tr>
                    <td><input id="ctl00_Content_CheckBoxList1_0" type="checkbox"
name="ctl00$Content$CheckBoxList1$0" /><label
for="ctl00_Content_CheckBoxList1_0">Staff</label></td>
            </tr><tr>
                    <td><input id="ctl00_Content_CheckBoxList1_1" type="checkbox"
name="ctl00$Content$CheckBoxList1$1" /><label
for="ctl00_Content_CheckBoxList1_1">Facility</label></td>
            </tr><tr>
                    <td><input id="ctl00_Content_CheckBoxList1_2" type="checkbox"
name="ctl00$Content$CheckBoxList1$2" /><label
for="ctl00_Content_CheckBoxList1_2">Pay</label></td>
            </tr><tr>
                    <td><input id="ctl00_Content_CheckBoxList1_3" type="checkbox"
name="ctl00$Content$CheckBoxList1$3" /><label
for="ctl00_Content_CheckBoxList1_3">Other</label></td>
            </tr>
    </table>
               </td>
           </tr>
           <tr>
               <td>
                   If other, please elaborate:<br />
                   <input name="ctl00$Content$txt2other"
type="text" id="ctl00_Content_txt2other" class="txtOther" />
                   &nbsp;<span id="ctl00_Content_CustomValidator3"
style="color:Red;font-weight:700;visibility:hidden;">Please enter a
comment in question #2.</span>
               </td>
           </tr>
           <tr>
               <td>
                   &nbsp;</td>
           </tr>



<tr>
               <td style="font-weight: 700">
                   2.- What did you like most about working here?<strong>
                   Check all that apply
                   <cc1:CheckBoxListValidator
ID="CheckBoxListValidator1" runat="server"
                       ControlToValidate="CheckBoxList1" Display="None"
                       ErrorMessage="Question 2 is
Required"></cc1:CheckBoxListValidator>
                   </strong><br /> </td>
           </tr>
           <tr>
               <td>






   ----------- Actual Markup on asp.net form


                   <asp:CheckBoxList ID="CheckBoxList1"
runat="server" CssClass="myradioButton">
                       <asp:ListItem Text="Staff"
Value="Staff">Staff</asp:ListItem>
                       <asp:ListItem Text="Facility"
Value="Facility">Facility</asp:ListItem>
                       <asp:ListItem Text="Pay"
Value="Pay">Pay</asp:ListItem>
                       <asp:ListItem Text="Other"
Value="Other">Other</asp:ListItem>
                   </asp:CheckBoxList>
               </td>
           </tr>
           <tr>
               <td>
                   If other, please elaborate:<br />
                   <asp:TextBox ID="txt2other" runat="server"
CssClass="txtOther"></asp:TextBox>
                   &nbsp;<asp:CustomValidator
ID="CustomValidator3" runat="server"
                       ClientValidationFunction="checkOther2"
ControlToValidate="txt2other"
                       ErrorMessage="Please enter a comment in
question #2." style="font-weight: 700"
                       ValidateEmptyText="True"></asp:CustomValidator>
               </td>
           </tr>
4

1 回答 1

0

你的 JS 看起来相当复杂。尝试更简单的方法...

function isValid(f)
{
    var cb = document.getElementById('<%=CheckBoxList1_3.ClientID%>');
    if(cb && cb.checked)
    {
        var tb = document.ElementById('<%=txt2other.ClientID%>');
        if(tb && tb.value.length > 0)
        {
            f.submit();
        }
        else
        {
            alert('Please enter a comment in question #2.');
        }
    }
}

如果您有很多这些，请尝试在复选框上设置一个属性，value=other这样当您遍历您的复选框时，您可以使用if(cb.checked && cb.value == 'other')

于 2012-04-05T23:01:34.073 回答