CODEWITHSUNDEEP
javascriptasp.netcheckboxtextbox
Matituk
Matituk

Reputation: 27

Checkbox activates textboxes in asp.net with vb.net

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:

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>

Upvotes: 2

Views: 2505

Answers (2)

Zachary
Zachary

Reputation: 6532

Your passing an id to your function named 'txtNPI', but you were using it like an object. I've changed the code to use the object 'textbox' and I've added 'removeAttribute' to remove the disabled state of the textbox.

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

Also, if you want to insert ASP.NET dynamic ID's into JavaScript you should use the syntax <%= Control.ControlID %>, and this will insert the dynamically generated control name.

Upvotes: 0

Vivian River
Vivian River

Reputation: 32430

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 %>';

Upvotes: 4

Related Questions