Solved

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

Posted on 2007-11-21
10
10,351 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

914 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now