Display textbox control when checkbox is checked

Question

I have used the following JavaScript to display Two Textbox Controls with Calendar Extenders when CheckBox is checked. Otherwise, they will be hidden. (I hide the table row which contains Textbox controls.)

<script type="text/javascript">
function forVisibleDateChecked(sender) {
    var rowDisplay = document.getElementById('<%= fromDateAndToDate.ClientID %>');
    rowDisplay.style.display = sender.checked ? 'inline' : 'none';
}
</script>

And my HTML codes are here:

    <tr>
        <td class="style2">
            <asp:CheckBox ID="chkVisibleControls" runat="server" 
               checked="false" onclick="forVisibleDateChecked(this)" />
        </td>
    </tr>

    <tr runat="server" id="fromDateAndToDate">
        <td class="style2">
            <asp:TextBox ID="tbxSetFromDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetFromDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetFromDate">
            </asp:CalendarExtender>

            <asp:TextBox ID="tbxSetToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetToDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetToDate">
            </asp:CalendarExtender>
        </td>
    </tr>

It is working if I don't set the table row Visble to false in Page Load Method.

fromDateAndToDate.Visible = false;

But as default, when the page is loaded, those two date time pickers should not be visible until the user decides to set date range, from date and to date. Any help will be much appreciated.

hallie · Accepted Answer · 2013-07-16 02:28:20Z

1

how about not make them as server control? You may need to change some of your asp.net control as normal HTML control.

<script type="text/javascript">
function forVisibleDateChecked() {
    var rowDisplay = document.getElementById('fromDateAndToDate');
    rowDisplay.style.display = sender.checked ? 'inline' : 'none';
}
</script>

HTML:

    <tr id="fromDateAndToDate" style="display:none">
        <td class="style2">
            <asp:TextBox ID="tbxSetFromDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetFromDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetFromDate">
            </asp:CalendarExtender>

            <asp:TextBox ID="tbxSetToDate" runat="server"></asp:TextBox>
            <asp:CalendarExtender ID="tbxSetToDate_CalendarExtender" runat="server" 
                Enabled="True" TargetControlID="tbxSetToDate">
            </asp:CalendarExtender>
        </td>
    </tr>

answered Jul 16, 2013 at 2:28

hallie

2,83320 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aung Kaung Hein Over a year ago

This is a very great idea. It works perfectly if I don't make table row as a server control. Thanks for your help. Cheers!

Collectives™ on Stack Overflow

Display textbox control when checkbox is checked

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