Solved

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

Posted on 2007-11-21
10
10,349 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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
<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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Author Comment

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

Expert Comment

by:Ashish Patel
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

743 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

13 Experts available now in Live!

Get 1:1 Help Now