Solved

Java Script in ASP.NET - CheckBox OnClick Hide/Show HTML Table

Posted on 2007-11-21
10
10,366 Views
Last Modified: 2011-09-20
Experts,
I have a check box that i want when i click on it, it shows my html table. I need to do this on client side.
I have written the following but i don't know how to pass a parameter to my javascript function that indicates the value of the check box and show/hide accordingly.
Any help is appreciated!

<asp:CheckBox ID="chk_QuestionTags_Software" runat="server" CssClass="text" Text="Software" onclick="ShowHide()" />
<table id="tbl_QuestionTags_Software" border="1" bordercolor="red" cellpadding="0" cellspacing="0" style="width: 100%"></table>

<script language="javascript" type="text/javascript">
                    function ShowHide()
                    {
                    document.getElementById('tbl_QuestionTags_Software').style.display ="";
                    }
</script>

0
Comment
Question by:feesu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
10 Comments
 
LVL 23

Expert Comment

by:Ashish Patel
ID: 20326703
<asp:CheckBox ID="chk_QuestionTags_Software" runat="server" CssClass="text" Text="Software" onclick="ShowHide(this)" />
<table id="tbl_QuestionTags_Software" border="1" bordercolor="red" cellpadding="0" cellspacing="0" style="width: 100%"></table>

<script language="javascript" type="text/javascript">
                    function ShowHide(obj)
                    {
                           if(!obj.checked)
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility="hidden";
                           else
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility ="visible";

                    }
</script>
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 20326758
if you just want to check the chekbox value and do showhide, then no need to send any prameter
<script language="javascript" type="text/javascript">
                    function ShowHide()
                    {
Var obj =    document.getElementById'chk_QuestionTags_Software')                        
if(!obj.checked)
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility="hidden";
                           else
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility ="visible";
 
                    }
</script

Open in new window

0
 

Author Comment

by:feesu
ID: 20326770
Hi asvforce,
That worked fine, but there are two issues:
1- I want the table to be hidden on load, as for now it shows on load
2- When i hide the table, its height still occupies space!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 20326785
you can call ShowHide() method in Body tage on Onload

<body  OnLoad="ShowHide()>

Or you can crete differnet method to hide the table at load

for 2nd one try below
                   function ShowHide()
                    {
Var obj =    document.getElementById'chk_QuestionTags_Software')                        
if(!obj.checked)
                                 document.getElementById('tbl_QuestionTags_Software').style.Display="none";
                           else
                                 document.getElementById('tbl_QuestionTags_Software').style.Display ="Block";
 
                    }
</script

Open in new window

0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 20326789
<table id="tbl_QuestionTags_Software" border="1" bordercolor="red" cellpadding="0" cellspacing="0" style="width: 100%;Display=none"></table>

this will hide is at load
0
 

Author Comment

by:feesu
ID: 20326814
>> Display =none
It hides it but then disables the check box function!
0
 
LVL 23

Expert Comment

by:Ashish Patel
ID: 20326822
try this for 2 option and for 1 query call the function on onLoad event with passing the obecjt name
like
<body onload="Show
                   function ShowHide(obj)
                    {
                           if(!obj.checked) {
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility="hidden";
                                 document.getElementById('tbl_QuestionTags_Software').style.height="0";
                                 document.getElementById('tbl_QuestionTags_Software').style.width="0";
                           }
                           else {
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility ="visible";
                                 document.getElementById('tbl_QuestionTags_Software').style.height="";
                                 document.getElementById('tbl_QuestionTags_Software').style.width="100%";
                          }
                    }
0
 

Author Comment

by:feesu
ID: 20326899
asvforce,
1- It's a user control and not an aspx, therefore it doesn't have body tag
2- The amended function did not change the height!
0
 
LVL 23

Accepted Solution

by:
Ashish Patel earned 250 total points
ID: 20327008
Please try this for hidding.
                   function ShowHide(obj)
                    {
                           if(!obj.checked) {
                                 document.getElementById('tbl_QuestionTags_Software').style.display = 'none';
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility="hidden";
                           }
                           else {
                                 document.getElementById('tbl_QuestionTags_Software').style.display = '';
                                 document.getElementById('tbl_QuestionTags_Software').style.visibility ="visible";
                          }
                    }
0
 

Author Comment

by:feesu
ID: 20332747
asvforce,
You last function worked fine. And the display=none worked after i did a lower case!

pratima_mcs,
Thanks for your help!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question