Show and Hide Textbox 1

taree · Mar 5, 2010

what am I missing here. I would like to hide the textbox and label until the user click the checkbox. please help and as always your help is appreciated.

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="checkboxhideandshow.aspx.vb" Inherits="testhide" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head >
<script type="text/javascript">

function ShowHide(obj)            
   {  
    if(!obj.checked)
    {                  
       document.getElementById('trucking').style.display = 'none';      
       document.getElementById('trucking').style.visibility="hidden";   
       document.getElementById('lblTrucking').style.display = 'none';      
       document.getElementById('lblTrucking').style.visibility="hidden";     
     }                
    else 
    {    
       document.getElementById('trucking').style.display = '';     
       document.getElementById('trucking').style.visibility ="visible";  
       document.getElementById('lblTrucking').style.display = '';     
       document.getElementById('lblTrucking').style.visibility ="visible";             
    }             
    }
                           
 </script>
 <title>Textbox Hide and Show</title>
 </head>
 <body>
 <form id="form1" runat="server">  
 <div>   
 <asp:CheckBox ID="chkTruking" runat="server"  Text="Trucking / Broker / TIOs"     onclick="ShowHide(chkTruking)" />  <br /> <br /> <br />  
 <asp:Label ID="lblTrucking" runat="server" Text="US DOT Number:"></asp:Label> 
 <asp:TextBox ID="trucking" runat="server"  ></asp:TextBox> 
 </div>
 </form>
 </body>
 </html>

jmeckley · Mar 5, 2010

using jquery and re-structuring the html some...

Code:

<head>
   <script src="url to jquery" type="text/javascript"></script>
   <script>
      $(function(){
          var $hiddenInput = $("#hidden-content").hide();
          $("#<%=chkTruking.ClientID%>").click(function(){
              $hiddenInput.show();
          });
      });
   </script>
</head>
...
<form id="form1" runat="server">  
   <asp:CheckBox ID="chkTruking" runat="server"  Text="Trucking / Broker / TIOs" />  
   <div id="hidden-content">
      <asp:Label ID="lblTrucking" runat="server" Text="US DOT Number:" AssociatedControlID="trucking" />
      <asp:TextBox ID="trucking" runat="server"  />
   </div>
</form>

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

jbenson001 · Mar 5, 2010

I belive you need to pass the clientID, not the serverID to your js function.

taree · Mar 5, 2010

Thank you Jason for your help. I have never used jquery before. The textbox is hidden when until you click the checkbox which is what I want. after you checked the checkbox the text box is visible.what do i need to do to hide when the checkbox is unchecked. I have never used jquery and please help me here for now. I will google and learn more soon.

thank you

taree · Mar 5, 2010

thank you Jason for your help. I figured it out myself with the help of google.

jmeckley · Mar 5, 2010

Code:

<script>
   $(function(){
       var $hiddenInput = $("#hidden-content").hide();
       $("#<%=chkTruking.ClientID%>").click(function(){
           if(this.checked) {
              $hiddenInput.show();
           }
           else {
              $hiddenInput.hide();
           }
       });
   });
</script>

let the client (js) handle all the visible state changes. this will keep explicit visual presentation concerns out of the code behind.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

taree · Mar 5, 2010

thank you Jason. your method is a lot better that what I was thinking to do. I appreciate your help and willingness to share your knowledge.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show and Hide Textbox 1

taree

Technical User

jmeckley

Programmer

jbenson001

Programmer

taree

Technical User

taree

Technical User

jmeckley

Programmer

taree

Technical User

Similar threads

Part and Inventory Search

Sponsor