Question

I am creating a page in asp.net with vb.net and I have a check box that I would like to use to activate four text boxes and a drop down list. I have tried using JavaScript to get this working, but it isn’t working so far. I have tried just activating one text box at this point. Any suggestions?

Here are my different objects:

• cbPractitioner (check box)
• txtNPI (text box)
• txtLicense (text box)
• txtDEA (text box)
• txtUpin (text box)
• ddSpecialty (drop down list)

Here is the Javascript code:

<script type="text/javascript">
    function ToggleTextBox(cbPractitioner, txtNPI) {
        var textbox = document.getElementById(txtNPI);
        if (cbPractitioner.checked) {
            txtNPI.disabled = false;
            txtNPI.value = "";
        }
        else {
            txtNPI.disabled = true;
            txtNPI.value = "";
        }
    }
 </script>

Here is the asp.net code:

<asp:CheckBox ID="cbPractitioner" runat="server" 
                text="This person is a Practitioner" 
                style="font-family: Arial, Helvetica, sans-serif; font-size: small" 
                onclick="ToggleTextBox(this,'txtNPI')" />
<asp:Label ID="lblNPI" runat="server" CssClass="style9" Text="NPI:"></asp:Label>

            &nbsp;

            <asp:TextBox ID="txtNPI" runat="server" Width="165px" style="text align:left" CssClass="style9" 
                    Font-Names="Arial" Font-Size="Small" Enabled="false"></asp:TextBox>

            <br />
            <br />
            <asp:Label ID="lblDEA" runat="server" CssClass="style9" Text="DEA Number:">    </asp:Label>
            &nbsp;
            <asp:TextBox ID="txtDEA" runat="server" style="text-align:left" Font-Names="Arial" 
                    Font-Size="Small" Enabled="false"></asp:TextBox>
            <br />
            <br />
            <span class="style9">

            </span>

        </td>
        <td class="style14" valign="top">

            <asp:Label ID="lblLicense" runat="server" CssClass="style9" 
                Text="License Number:"></asp:Label>
            &nbsp;
            <asp:TextBox ID="txtLicense" runat="server" Font-Names="Arial"  style="text-align:left"
                    Font-Size="Small" Height="20px" Enabled="false"></asp:TextBox>
            <br />
            <br />
            <span class="style9">
            <asp:Label ID="Upin" runat="server" Text="Upin:"></asp:Label>
            &nbsp;
            </span>

            <asp:TextBox ID="txtUpin" runat="server" Width="173px" CssClass="style9" style="text-align:left"
                    Font-Names="Arial" Font-Size="Small" Enabled="false"></asp:TextBox>

        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Label ID="lblSpecialty" runat="server" 
                style="font-family: Arial, Helvetica, sans-serif; font-size: small" 
                Text="Specialty:"></asp:Label>
            <asp:DropDownList ID="ddSpecialty" runat="server" 
                DataSourceID="Practitioner_Specialty" DataTextField="SPEC_TITLE" 
                DataValueField="SPEC_TITLE" Enabled="false">
            </asp:DropDownList>

Answer 1

The problem is that ASP.net textboxes and other controls actually have two IDs: a server-side ID and a client-side ID.

The server-side ID is the one you specify in the markup with ID='foo' RunAt='server'. You use this ID in all your server-side .net code.

For client-side code, you must use the client-side ID. The client-side ID is generated from the server-side ID with some characters added to it to make sure it is unique. In order to get the client-side ID in your Javascript, write something like this:

var cbPractitionerId = ‘<%=cbPractitioner.ClientID %>’;