CODEWITHSUNDEEP
c#javascriptasp.netcheckboxhide
Aung Kaung Hein
Aung Kaung Hein

Reputation: 1566

Display textbox control when checkbox is checked

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.

Upvotes: 0

Views: 1966

Answers (1)

hallie
hallie

Reputation: 2845

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>

Upvotes: 1

Related Questions