I have a form in asp.net 3.5 , which has a master page and a child page (content page). The form has several questions, I am using the asp.net checkboxlist for a questions, since multiple options can be selected, if the user selects 'Other' on one of the selections, then they have to enter data into a textbox field.

I made the following client side javascript to validate this but, the code doesnt seem to check wheter the Other option value is selected, I believe it has to do with the way the html is rendered on the page,,,

Can you please suggest how to do this?

Thanks in advance.

Rendered 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>

• javascript
• asp.net
• validation

Your JS looks rather complicated. Try a more simple approach...

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.');
        }
    }
}

If you have a lot of these, try setting a property on the checkbox like value=other so when you loop through your checkboxes, you can use if(cb.checked && cb.value == 'other')