Hiding and unhiding controls client side?

I just post the code which shows how to hide/show elements

<script type="text/javascript">
 
 
function toggle(val) {
      if (val == 1) {
            document.getElementById('existing_customer').style.display = 'inline';
            document.getElementById('cust_name').style.display = 'none';
			 document.getElementById('cust_surname').style.display = 'none';
            document.getElementById('cust_city').style.display = 'none';
				 document.getElementById('cust_contact').style.display = 'none';
            document.getElementById('cust_email').style.display = 'none';
			document.getElementById('cust_name2').style.display = 'none';
			document.getElementById('cust_surname2').style.display = 'none';
            document.getElementById('cust_city2').style.display = 'none';
				 document.getElementById('cust_contact2').style.display = 'none';
            document.getElementById('cust_email2').style.display = 'none';
			document.getElementById('existing_customer2').style.display = 'inline';
      }
      else if (val == 2) {
           document.getElementById('existing_customer').style.display = 'none';
            document.getElementById('cust_name').style.display = 'block';
			 document.getElementById('cust_surname').style.display = 'block';
            document.getElementById('cust_city').style.display = 'block';
				 document.getElementById('cust_contact').style.display = 'block';
            document.getElementById('cust_email').style.display = 'block';
			document.getElementById('cust_name2').style.display = 'block';
			 document.getElementById('cust_surname2').style.display = 'block';
            document.getElementById('cust_city2').style.display = 'block';
				 document.getElementById('cust_contact2').style.display = 'block';
            document.getElementById('cust_email2').style.display = 'block';
			document.getElementById('existing_customer2').style.display = 'none';
      }
}
 
 
</script>
 
 
<form name="forma" id="forma" method="POST" action="">
      <table width="550" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><b>Customer</b></td>
            <td>
                  <input name="cust_type" type="radio" id="cust_type" value="2" onClick="toggle(2)"> new 
                  <input name="cust_type" type="radio" id="cust_type2" value="1" onClick="toggle(1)"> existing
              </td>
        </tr>
        <tr>
            <td id="existing_customer2">Choose existing customer</td>
            <td>
                  <select name="existing_customer" id="existing_customer">
                        <option value="0">New customer</option>
                        <option value="1">Mateja Zavrh</option>
                        <option value="2">Miha Klamfar</option>
                        <option value="3">Goran Tratnik</option>
                        <option value="4">Mojca Maher</option>
                  </select>
            </td>
        </tr>
        <tr>
            <td id="cust_name2">Name</td>
            <td><input name="cust_name" id="cust_name" type="text"></td>
        </tr>
        <tr>
            <td id="cust_surname2">Surname</td>
            <td><input name="cust_surname" id="cust_surname"type="text"></td>
        </tr>
        <tr>
            <td id="cust_city2">City</td>
            <td><input name="cust_city" id="cust_city" type="text"></td>
        </tr>
        <tr>
            <td id="cust_contact2">Contact number</td>
            <td><input name="cust_contact" id="cust_contact" type="text"></td>
        </tr>
        <tr>
            <td id="cust_email2">Email</td>
            <td><input name="cust_email" id="cust_email"type="text"></td>
        </tr>
</form>

Select allOpen in new window

well if you are using .net you need to replace all of the element names he handed you above with
myControl.ClientId if you want to hide/show myControl. It will render the client side id for you to use after the html is rendered.
something like
....document.getelementbyid('<%= textbox1.clientid %>')....... in your actual code or
string javascript ="var id = document.getElementById('"+ myControl.ClientId +"');"; in your server code.

First, let me thank each of you for your proposed solutions.  I have learned a lot from them, but I'm not where I need to be yet.

The solution proposed by erikTsomik is interesting.  The controls in his example do indeed disappear and reappear on command.  The concern that I have with this approach is that the example does not use asp.net controls and I'm not yet sure how I can push the data they collect client side back to the server (read the input from my C# code behind application code.  I also need to have the controls hidden on startup and I haven't figured how to make this happen yet.  If you can get me through these two knot holes, my problem is solved.

The second two solutions proposed by lunadl and monarch_ilhan both address my perceived need to use asp.net controls.  However web part development requires me to develop using a code behind model.  Each control has to be created in the web parts CreateChildControls method and then rendered in the web parts RenderWebPart method.  This is because a web part is first and foremost a "part" of a page generated dynamically at some point in the future.  If you can show me how to do implement your solution in a something like the following, I will be happy to pursue this avenue further.

                Control webControl;
                cmdTest = new Button();
                cmdTest.Text = "Test Button";
                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                webControl = cmdTest;
                Controls.Add(webControl);

Bob

Control webControl;
               Textbox txt=new TextBox();
                cmdTest = new Button();
                cmdTest.Text = "Test Button";
             cmdTest.Attributes.Add("onclick","document.getElementById('"+txt.ClientID+"').style.display="inline"); //Add on client side click function. instead of javascript code, you can give the javascript function directly

or

cmdTest.Style.Add(HtmlTextWriterStyle.Display,"none"); // hides control with css style settings

                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                webControl = cmdTest;
                Controls.Add(webControl);

Hello monarch_ilhan,

With a little tweaking (see below) your last sample seems to hide and unhide the textbox.

                Control webControl;
                txt = new System.Web.UI.WebControls.TextBox();
                txt.Text = "Enter you response here";
                txt.Width = 100;
                txt.Style.Add(HtmlTextWriterStyle.Display, "block");
                txt.ID = "txtBox";

                cmdTest = new Button();
                cmdTest.Text = "Test Button";
                cmdTest.Font.Size = FontUnit.Small;
                cmdTest.Font.Bold = true;
                cmdTest.ID = "cmdTest";
                cmdTest.Attributes.Add("onclick","document.getElementById('txtBox').style.display='none'");
                webControl = cmdTest;
                Controls.Add(webControl);

However, there three points to resolve.

1. When the cmdTest button is clicked the inline javascript hides the textbox.  But then it does a postback to the server.  I think I can prevent this by adding a return false statement to the end of the inline javascript.  However, this may not be an issue.

2. When the postback described in point 1 occurs, the text value of the textbox is not being returned to the server.  If I add the textbox to my controls collection as a WebControl, the text value is returned to the server.  However... Making the textbox a WebControl also prevents it from being hidden.

3. In the end I need to be able to unhide my controls using a javascript function.  This is because the control that starts this whole process is client side javascript.

Any more ideas?

Bob

Hello All,

I managed to figure out that the if  the 'visibility' attribute for a webcontrol is set to either 'show' or 'hidden' I can manipulate the controls as needed.

Now all I have to do is figure out how to find a webcontrol from javascript so that I can set the attribute.

The following line doesn't seem to work...

     document.getElementById('txtBox').style.visibility = 'show';

I also tried using the getElementsByName method with the same result.  

Any ideas?

Bob

use ClientID property of textbox.
document.getElementById('<% #txtBox.ClientID%>').style.visibility = 'show';
Look the source of rendered page, and find the correct id of invisible control. probably, since it is a child control of a control, it took the parent control name as prefix (like Control1_txtBox)

Hello monarch_ilhan,

I have been playing with this for the last couple hours and it isn't working.  Let me elaborate a bit.  Here is where I declare the javascript function:

private const string EmbeddedScipt = @"<script language=javascript>
          function _ShowControls()
         {
              document.getElementById('<% #txt.ClientID>').style.visibility = 'show';
              alert('Got there!');
          }
</script> ";

If I remove the document line I see the alert box pop up with out any difficulty.  When I run the function as shown, I get a an "Error On Page" warning at the bottom of my web part page and do not see the alert.

If I look at the source for the page, I can find the txtBox control is defined as follows:

<input name="ctl00$m$g_001b6c67_13a0_42b5_8114_c10a29de95b7$txtBox" type="text" id="ctl00_m_g_001b6c67_13a0_42b5_8114_c10a29de95b7_txtBox" style="width:300px;visibility:hidden;" />

I can also see that the javascript function I have listed above is included literally and has not been expanded to reflect the id of the control.

Bob

Hello monarch_ilhan,

Well I finally got it all worked out.  The problem was that the <% %> directive will not work in with a child webcontrol in a webpart.  However I was able to resolve the problem by by referencing the ClientID in my JavaScript function before I embedded it into the webpart with a call to RegisterClientScriptBlock.

Thank you for your help.

Bob

Hi Bob,
Sory I couldnt reply to your last comment but you did by yourself :)
You welcome. Knowledge grows as we shared

Small mistake Bob, probably a typo,

private const string EmbeddedScipt = @"<script language=javascript>
          function _ShowControls()
         {
              document.getElementById('" +txt.ClientID +"').style.visibility = 'show';
              alert('Got there!');
          }
</script> ";

txt.ClientID should be rendered at server and since you're registering a javascript through a function perhaps, it needs to be unquoted.