Showing or hiding controls using a client side script

This question might have ben asked number of times but my search did not yield a full answer to my question. I found some partial answers but I am sure a full well explained answer will satisfy me as a novice asp.net developer and people who are in the same boat as I am.

I like to use a checkbox and based on the selection of the checkbox, I want to show or hide number of controls (mainly labels and text boxes but possible to include other controls in the future). I want to do that at the client side to avoid round-trip delays (hence I believe I have to run a client side java script). My controls that I want to control their visibility using the checkbox also happened to be located close to each other and I can contain them in a DIV element if necessary.

I really appreciate a sample code to show how to implement such a thing in VS2005...

jsdude99

5/5/2008 12:40:11 AM

📁 asp.net.web-forms
📃 93655 articles.
⭐ 1 followers.

💬 19 Replies
👁️‍🗨️ 212 Views

In javascript you have hidden property per control to make them visible or invisible.

Cheers
Al
My Blog
MapStats.NET
Please click on 'Mark as Answer' if this post answered your question!

albertpascual

5/5/2008 2:05:01 AM

Thanks for the reply. Would you be kind enough to give an example? As I mentioned, I found similar comments but no detailed example to guide the novices...

jsdude99

5/5/2008 3:51:42 AM


 jsdude99 :

Thanks for the reply. Would you be kind enough to give an example? As I
mentioned, I found similar comments but no detailed example to guide
the novices...
 
Here's an example
    document.getElementById('<%= TextBox1.ClientID %>').display = "none"; // TO HIDE
    document.getElementById('<%= TextBox1.ClientID %>').display = "block"; //TO SHOW 
Regards,Vinz

"Code, Beer and Music" that's my way of being a programmer!

How to get your Forum Question Answered | Blog | CodeASP.NET

vinz

5/5/2008 3:55:33 AM

Hi,
you have to set attributes in the Page_load event in aspx.cs file as follow...
CheckBox1.Attributes.Add("onclick", "javascript:Check(this)");
 


in your aspx Page
add java script
 function Check(id)
        {
            
            var cb2 = document.getElementById("<%= CheckBox2.ClientID %>");
           
            if    (document.getElementById(id).checked == true)
                {
                cb2.display = "none";
 
            }
            else
                {
                cb2.display = "block";
 
            }    
 
}
 
int his example i have two checkbox (CheckBox1 and CheckBox2)
i have set attributes of CheckBox1 in aspx.cs field and set the onclick event of Checkbox 
it calls function  Check(this).... here this means it pass CheckBox1 as parameter..
in JavaScript function..
i have taken client id of second CheckBox in variable cb2..
in condition i have checked that if first Checkbox is Checked then second CheckBox Should Not Display..
and if it is not checked than it should display..
 
if my post helps you ..
"Mark as Answer" 
Jigar Patel
Web Developer
India

Jigarpatel

5/5/2008 4:07:30 AM

Thanks Jigar for the most comprehensive answer so far. However, your solution did not work. When I click the first Checkbox, the browser shows "error on page" message and I do not know what is wrong. I then created a new web project and just put two check boxes and your code. Below are the contens of two files: 
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!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>Untitled Pagetitle>
head>
<body>

    <script type="text/javascript">

        function Check(id)
        {
           var cb2 = document.getElementById("<%= CheckBox2.ClientID %>");
           if   (document.getElementById(id).checked == true)
            {
              cb2.display = "none";
            }
            else
            {
              cb2.display = "block";
            }   
        }

    script>

    <form id="form1" runat="server">
        <div>
            <asp:CheckBox ID="CheckBox1" runat="server" />
            <asp:CheckBox ID="CheckBox2" runat="server" />
        div>
    form>
body>
html>
  using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            CheckBox1.Attributes.Add("onclick", "javascript:Check(this)");
        }
    }
}

jsdude99

5/5/2008 4:52:45 AM

 Hi,
        Just replace the javascript function with the below function
  function Check(id)
        {
           var cb2 = document.getElementById("<%= CheckBox2.ClientID %>");
           if   (document.getElementById(id).checked == true)
            {
              cb2.style.display = "none";
            }
            else
            {
              cb2.style.display = "block";
            }   

        }

Hope this helps U... 
Regards,
Srinivas Ramanujan

Words offer the means to meaning, and for those who will listen, the enunciation of truth !!!!!

aresssrinivas

5/5/2008 4:58:42 AM

Still error on page message!!

jsdude99

5/5/2008 5:03:59 AM

 Hi,
i am sorry
i have made mistake here..
write
 
cb2.style.display = "none";
you have to add style in your statment cb2.display = "none"; 
 
still get error
replace 
var cb2 = document.getElementById("CheckBox2"); 
 
"Mark as Answer" 
Jigar Patel
Web Developer
India

Jigarpatel

5/5/2008 5:06:37 AM

I think aresssrinivas also picked "style" missing but neither his complete function replacement nor addding style got it working..

jsdude99

5/5/2008 5:11:23 AM

Hi,
write your error here...
 Have you replace
replace 
var cb2 = document.getElementById("CheckBox2"); 
 
Jigar Patel
Web Developer
India

Jigarpatel

5/5/2008 5:12:58 AM

Here's a working example for you..

Untitled Page

PS: I have tested on this and it works fine... :)

Regards,Vinz

"Code, Beer and Music" that's my way of being a programmer!

How to get your Forum Question Answered | Blog | CodeASP.NET

vinz

5/5/2008 5:15:53 AM

If I keep the first line below

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

(whic is generated automatically by VS2005 and have your entire code copy/pate it does not work. But if I get rid of that line, it now works. So, what makes the difference? I am still concerned though since they all are needed..

Also worthwile to note is that there is a warning in intellisense under onclick keyword on the line onclick="toggleCheck();" /> that "Attribute 'onclick' is not a valid attribute of element 'checkbox'

jsdude99

5/5/2008 5:31:15 AM

jsdude99:

Also worthwile to note is that there is a warning in intellisense under onclick keyword on the line onclick="toggleCheck();" /> that "Attribute 'onclick' is not a valid attribute of element 'checkbox'

Basically CheckBox has only onCheckChange event..But since we wanted to have an additional event attach to the checkbox then we added the javascript onclick event to make it work... Once it will render in the page then the javascript will recognize that event and execute the event...

Regards,Vinz

"Code, Beer and Music" that's my way of being a programmer!

How to get your Forum Question Answered | Blog | CodeASP.NET

vinz

5/5/2008 5:43:08 AM

Hi,

Actually onclick is javascript event..

and you write it to the server CheckBox control

thats why it is giving underline to it..actually it does not effect you.. its fine..

when actually you run that page..

if you see source of that page then server checkbox seems as html checkbox input type control..

thats why its fine here..

i know that you will ask this question thats why i add attributes in the page load event and assign javascript over there ..

answer given by vinz is also true...

hope this post helps you to understand things..

Jigar Patel
Web Developer
India

Jigarpatel

5/5/2008 5:45:55 AM

Thanks to both of you for the explanation. The warning does not concern me now. But the problem is the removal of the first line. I tested by changing AutoEventWireup property to "false" while keeping the first line and got it working as well. Now my concern is changing a page directive which is automatically created by the environment and although I may get the javascript working but potentially ****-up other things and create further conflicts or compexity??

jsdude99

5/5/2008 5:55:18 AM

Hi,

at particular this peroperty, does not effect or conflict to you..

i dont think so..

and Please "Mark as Answer" to posts which helps you specially to help others to find right solutions...

thanks in advance

Jigar Patel
Web Developer
India

Jigarpatel

5/5/2008 6:02:28 AM

jsdude99 :

I tested by changing AutoEventWireup property to "false" while keeping the first line and got it working as well. Now my concern is changing a page directive which is automatically created by the environment and although I may get the javascript working but potentially ****-up other things and create further conflicts or compexity??

Please read this article below

http://www.codeproject.com/KB/aspnet/AutoEventWireup.aspx

http://www.dotnetspider.com/resources/2630-About-Aut-ventWireup.aspx

Regards,Vinz

"Code, Beer and Music" that's my way of being a programmer!

How to get your Forum Question Answered | Blog | CodeASP.NET

vinz

5/5/2008 6:06:13 AM

I think you change the visible = false for the particular controls

If the control visible is false in the form it does not identify the control to false the control visibility please using

TextBox.Attributes.CssStyle.Add("visibility", "hidden");

In the Page Load then you can Do it

All the Best Yes

Mark as ANSWER if the post is useful to you
With Regards

Solaimalai

With Regards,
Solaimalai V.T

SolaimalaiVT

5/5/2008 6:48:26 AM

I finally get a working solution, without requiring to change AutoEventWireup propery (I believe the default state is different in VS2003&2005). This can be achieved by declaring the event in during page load as Jiger mentioned. I come-up with a working solution by combining both Jiger's and Vinz's posts. Thanks for your input and I mark both of you as correct answer. However, I at the end, I am not happy with the overall outcome since if you have text on the checkbox, only the checkbox disappears but the text stays. Also, the page shows both controls side by side when the page first loads but after hiding and showing, the checkboxes are shown on vertically staggered. Unless I find another way of doing it, I will ditch this idea and go back to server side to show/display it more aesthetically. Any way, below is the final working code with sticky text. I am providing that for helping out to the people like myself for future searches. 
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<!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>Untitled Pagetitle>
head>

<script type="text/javascript" language="javascript">
function WorkingToggle()
{
     var cb1 = document.getElementById('<%= CheckBox1.ClientID %>')
     var cb2 = document.getElementById('<%= CheckBox2.ClientID %>')
        if (cb1.checked == true)
        {
            cb2.style.display = "none";
        }
        else
        {
            cb2.style.display = "block";
        }
}
script>

<body>
    <form id="form1" runat="server">
        <div>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="ABC" />
            <asp:CheckBox ID="CheckBox2" runat="server" Text="XYZ" />
        div>
    form>
body>
html>
  using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace WebApplication2
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            CheckBox1.Attributes.Add("onclick", "javascript:WorkingToggle();");
        }
    }
}

jsdude99

5/5/2008 7:09:08 AM

Showing or hiding controls using a client side script

Related Posts: