Show/Hide TextBox and enable/disable Textbox validation based on CheckBoxList selection

Question

There is a CheckBoxList (selection can be multiple) and a TextBox which is not displayed by default. The requirements are:
1. When user click "Other" in CheckBoxList, the TextBox should display.
2. Since the TextBox is required when displayed, the Validator should be disabled when the TextBox is not displayed.

.aspx content page



        <label for="labelSelection">Please Select:</label>           
        <asp:CheckBoxList ID="cblSelection" onclick="ShowOtherInfo(this)" runat="server">
        <asp:ListItem Text="AAA" Value="1" /> 
        <asp:ListItem Text="BBB" Value="2" />            
        <asp:ListItem Text="Other" Value="0" />                       
        </asp:CheckBoxList>

        <div id="OtherInfo" style ='display:none'>
        <label for="labelOtherInfo">Enter detail if "Other" is selected: </label>
        <asp:TextBox ID="OtherInfoTextBox" runat="server" />
        <asp:RequiredFieldValidator ID="rfvOtherInfo" ControlToValidate="OtherInfoTextBox"
            ErrorMessage="Enter other info" SetFocusOnError="true" Display="Dynamic" runat="server" />
        </div> 
        <div> 
        <asp:Button ID="buttonSubmit" runat="server" Text="Submit" CausesValidation="true" OnClientClick="ShowOtherInfo()" OnClick="buttonSubmit_Click" /> 
        </div>

Javascript placed on .master page



      function ShowOtherInfo() {
          var OI = document.getElementById('OtherInfo');
          var CheckLists = document.getElementById('cblSelection');
          var checkbox = CheckLists.getElementsByTagName("input");
              if (checkbox[2].checked) {
                  document.getElementById('OtherInfo').style.display = "block";
                  ValidatorEnable(document.getElementById('rfvOtherInfo'), true);
              } else {
              document.getElementById('OtherInfo').style.display = "none";
              ValidatorEnable(document.getElementById('rfvOtherInfo'), false);
              }
      }

Since I prefer using Javascript for validation, I have tried onchange/onclick event for CheckBoxList and onClientClick event for "Submit" button, but none of them works. Any help is greatly appreciated.

After initial posting, I tried to replace OnSelectedIndexChanged="ShowOtherInfo" with onclick="ShowOtherInfo(this)" for CheckBoxList. And the code-behind on .cs file is:

public void DisplayOtherInfo(object sender, EventArgs e) {



    CheckBoxList cblSelection = (CheckBoxList)myFormView.FindControl("cblSelection");
    RequiredFieldValidator rfvOtherInfo = (RequiredFieldValidator)myFormView.FindControl("rfvOtherInfo");
    HtmlGenericControl OtherInfo = new HtmlGenericControl("OtherInfo");

    for (int i = 0; i < cblSelection.Items.Count; i++)
    {
        if (cblSelection.Items[2].Selected == true)
        {
            OtherInfo.Style["display"] = "block";

    rfvOtherInfo.Enabled = true;
        }
        else
        {
            OtherInfo.Style["display"] = "none";

            rfvOtherInfo.Enabled = false;
        }
    }
}

But the TextBox still doesn't even display, not to say disable validator.

"prefer using Javascript for validation" - that's not good. Always use server validation, then add client validation for user experience — Ian
– Ian, Commented Mar 20, 2013 at 6:02
Sorry not actually mean "prefer". Whatever works is good, but I assume Javascript might be better for user experience. — Denis
– Denis, Commented Mar 20, 2013 at 12:40
I tried to replace OnSelectedIndexChanged="ShowOtherInfo" with onclick="ShowOtherInfo(this)" for CheckBoxList. And the code-behind is: — Denis
– Denis, Commented Mar 20, 2013 at 16:12

Nitin Aggarwal · Accepted Answer · 2013-03-20 08:14:42Z

This is the Javascript Code

<script type="text/javascript">
        function ShowOtherInfo() {
            var OI = document.getElementById('OtherInfo');
            var CheckLists = document.getElementById('cblSelection');
            var checkbox = CheckLists.getElementsByTagName("input");
            if (checkbox[2].checked) {
                document.getElementById('OtherInfo').style.display = "block";
            } else {
                document.getElementById('OtherInfo').style.display = "none";
            }
            return true;
        }

        function onSubmit() {
            if (document.getElementById('OtherInfoTextBox').value == "") {
                if (checkbox[2].checked) {
                    alert('Enter other info');
                    return false;
                }
                else {
                    return true;
                }
            }
            else {
                return true;
            }
        }
    </script>

and this is your .aspx content

<div>
    <label for="labelSelection">Please Select:</label>           
        <asp:CheckBoxList ID="cblSelection" onclick="ShowOtherInfo(this)" runat="server">
        <asp:ListItem Text="AAA" Value="1" /> 
        <asp:ListItem Text="BBB" Value="2" />            
        <asp:ListItem Text="Other" Value="0" />                       
        </asp:CheckBoxList>

        <div id="OtherInfo" style ='display:none'>
        <label for="labelOtherInfo">Enter detail if "Other" is selected: </label>
        <asp:TextBox ID="OtherInfoTextBox" runat="server" />

        </div> 

        <asp:Button ID="buttonSubmit" runat="server" Text="Submit" CausesValidation="true" OnClientClick="return onSubmit();" /> 
</div>

Thanks a lot for answering my question. Seems function ShowOtherInfo() still didn't do its job. When I click "Other" in CheckBoxList, nothing happens. Please note that selections can be multiple.

Collectives™ on Stack Overflow

Show/Hide TextBox and enable/disable Textbox validation based on CheckBoxList selection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related