469,909 Members | 1,763 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

want to show/hide text in asp:textbox depending on if asp:checkbox is checked

34
Hi,

I am creating a page in asp.net that has a checkbox and a textbox. When the checkbox is checked I want the textbox to become active and show text. If the checkbox is unchecked, I would like the text box to become disabled and show no text.

Is this possible to do via javascript? I would like to handle it all client side.

Thanks,
JLC
Aug 9 '07 #1
2 2553
Frinavale
9,735 Expert Mod 8TB
Hi,

I am creating a page in asp.net that has a checkbox and a textbox. When the checkbox is checked I want the textbox to become active and show text. If the checkbox is unchecked, I would like the text box to become disabled and show no text.

Is this possible to do via javascript? I would like to handle it all client side.

Thanks,
JLC
This is possible with JavaScript.
Just remember that JavaScript works on Html objects, not ASP objects.

You'll need to know the ClientId of the Textbox control so that you can access it using yur JavaScript....

So basically you're going to write a JavaScript function that handles the onClick event of the check box and is passed the name (clientID) of the textbox.... then enable the textbox or disable it depending on the value of the check box by using the getElementByID() javascript method.

Take a look at the .NET article How to check if a textbox contains a number to get a better idea of how to use JavaScript in your .NET project.

-Frinny
Aug 10 '07 #2
JLC
34
Well I think I sort of got it, but it still isn't working correctly. I have it so when the page loads, the check box is checked. And when you uncheck the check box, the text becomes disabled. But when you recheck the check box, nothing happens.

Here's my code...I'm not sure why I am not getting this to work.
Thanks...

Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NotifyDialog.aspx.cs" Inherits="NotifyDialog" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>Notify Dialog Page</title>
  8. <script type="text/javascript">
  9.     function EmailChecked(checkboxid)
  10.     {     
  11.         if(checkboxid.defaultChecked == true)
  12.         {
  13.             document.getElementById('EmailTextBox').disabled=true;
  14.         }
  15.         else
  16.         {
  17.             document.getElementById('EmailTextBox').disabled=false;
  18.         }
  19.  
  20.     }
  21. </script>
  22.  
  23. </head>
  24.  
  25. <body>
  26. <form action="NotifyDialog.aspx" runat="server">
  27.    <div style="width: 525px; height: 300px">
  28.  
  29.    <!-- will eventually pull items from Davids db, but will hard code them for now -->
  30.     <asp:DropDownList ID="StatusDropDownList" runat="server" style="z-index: 100; left: 39px; position: absolute; top: 62px" Width="158px" >
  31.         <asp:ListItem Selected="True" Text="Released" Value="Released">Released</asp:ListItem>
  32.         <asp:ListItem Text="Down" Value="Down">Down</asp:ListItem>
  33.         <asp:ListItem Text="Blocked" Value="Blocked">Blocked</asp:ListItem>
  34.         <asp:ListItem Text="Deploying" Value="Deploying">Deploying</asp:ListItem>
  35.     </asp:DropDownList>
  36.  
  37.  
  38.  
  39.     <asp:CheckBox id="EmailCheckBox" runat="server" checked="true" style="z-index: 101; left: 39px; position: absolute; top: 104px" />
  40.  
  41.     <asp:TextBox ID="EmailTextBox" runat="server" text="Select an option from the Status drop down menu" style="z-index: 102; left: 39px; position: absolute; top: 131px" Height="103px" TextMode="MultiLine" Width="440px"></asp:TextBox>
  42.  
  43.     <asp:Button ID="SubmitButton" runat="server" Text="Submit" style="z-index: 103; left: 435px; position: absolute; top: 252px" Width="50px" />
  44.  
  45.     <asp:Label ID="EmailLabel" runat="server" Style="z-index: 104; left: 66px; position: absolute;
  46.            top: 105px" Text="Send Email"></asp:Label>
  47.     <asp:Label ID="StatusLabel" runat="server" Style="z-index: 106; left: 39px; position: absolute;
  48.            top: 36px" Text="Status"></asp:Label>
  49.  
  50.    </div>
  51.    </form>
  52.  
  53. </body>
  54. </html>
  55.  

Here's for the .cs page

Expand|Select|Wrap|Line Numbers
  1. public partial class NotifyDialog : System.Web.UI.Page
  2. {
  3.     protected void Page_Load(object sender, EventArgs e)
  4.     {
  5.  
  6.        EmailCheckBox.Attributes.Add("OnClick", "javascript: EmailChecked(" + EmailCheckBox.ClientID + ")");
  7.     }
  8.  
This is possible with JavaScript.
Just remember that JavaScript works on Html objects, not ASP objects.

You'll need to know the ClientId of the Textbox control so that you can access it using yur JavaScript....

So basically you're going to write a JavaScript function that handles the onClick event of the check box and is passed the name (clientID) of the textbox.... then enable the textbox or disable it depending on the value of the check box by using the getElementByID() javascript method.

Take a look at the .NET article How to check if a textbox contains a number to get a better idea of how to use JavaScript in your .NET project.

-Frinny
Aug 13 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

By using this site, you agree to our Privacy Policy and Terms of Use.