• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 10403
  • Last Modified:

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

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
feesu
Asked:
feesu
  • 4
  • 3
  • 3
1 Solution
 
Ashish PatelCommented:
<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
 
Pratima PharandeCommented:
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
 
feesuAuthor Commented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Pratima PharandeCommented:
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
 
Pratima PharandeCommented:
<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
 
feesuAuthor Commented:
>> Display =none
It hides it but then disables the check box function!
0
 
Ashish PatelCommented:
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
 
feesuAuthor Commented:
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
 
Ashish PatelCommented:
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
 
feesuAuthor Commented:
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now