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

JavaScript
1

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:

%@ 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

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.

3

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

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.

5

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";