SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a server text box control visible when a button is clicked

    This seems to be such a simple problem. But I feel very challenged. I am almost there...but little help is needed.

    When the form loads the text box is not visible. The way I did this was, in the page load event , I did TextBox1.Style.Add("display","none").

    That way, the text box control is rendered in the page. And when the user clicks on a button, the text box control should become visible.

    With the code below, unless I click on the button twice, the text box doesn't appear:

    Code:
    %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Javascript_controlvisibility.aspx.cs" Inherits="FHLBSF.QRMDMS.WebUI.Javascript_controlvisibility" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
        <title>Help me</title> 
         
        <script type="text/javascript"> 
            function toggleVisibility(controlId1) { 
                 
                var control1 = document.getElementById(controlId1); 
     
     
                control1.style.display = ""; 
     
                if (control1.style.visibility == "visible" || control1.style.visibility == "") { 
                     
                    control1.style.visibility = "hidden"; 
                } 
                else { 
                     
                    control1.style.visibility = "visible"; 
                } 
     
     
                     
                     
            }     
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server"> 
        <div> 
        <div>     
               <asp:TextBox ID="TextBox1" runat="server" >textbox1</asp:TextBox>    
             
            <input type="button" ID="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" /> 
        </div> 
        </div> 
        </form> 
    </body> 
    </html>
    Any help is greatly appreciated.
    thanks
    nath

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    You've set the display property to none, but then are changing the visibility property instead.

    The visibility property retains the object in the flow of the page, but doesn't show it so you end up with a hole where that object used to be.
    The display property removes the object from the visible flow of the page, so the page readjusts over the area where it used to be.

    Decide which one of those two properties you want to use for controlling whether the element should be seen or not, and stick with one of them.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    If I remove TextBox1.Style.Add("display", "none") in the Page_Load event, the textbox shows up. I want the text box to be invisible when the page loads. I want only the button to be visible when the page is loaded. After the page gets loaded, when the user clicks on the button, the text box should become visible. And when the user clicks again on the button, the text box should become invisible.

    Right now, this is what is happening. The textbox doesn't show up when the page is loaded because of TextBox1.Style.Add("display", "none") . which is what I want. But when I click on the button, the button jumps to the right side and there is a hole (as you said). when i click again, the text box becomes visible.

    The only thing that is not working is, when the user clicks first time on the button, I get a hole instead of text box.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bnath001 View Post
    The only thing that is not working is, when the user clicks first time on the button, I get a hole instead of text box.
    Your script is currently changing the visibility of the text box, which is a different thing from it's display. See visibility vs display
    You will need to adjust your script so that it works with the display style, instead of the visibility style.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are the MAN!!!! Paul.

    I read your article and was able to figure out the issue. I chose display over visibility.

    This piece of code works for me now. And thanks a million for educating me the differences between "visibility" and "display".

    var control1 = document.getElementById(controlId1);

    //control1.style.display = "";

    if (control1.style.display == "none" )

    control1.style.display = "block";
    else
    control1.style.display = "none";


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •