Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2007-11-21
10
Medium Priority
?
10,395 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
Technology Partners: 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 1000 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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

609 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