feesu
asked on
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_Softw are" runat="server" CssClass="text" Text="Software" onclick="ShowHide()" />
<table id="tbl_QuestionTags_Softw are" border="1" bordercolor="red" cellpadding="0" cellspacing="0" style="width: 100%"></table>
<script language="javascript" type="text/javascript">
function ShowHide()
{
document.getElementById('t bl_Questio nTags_Soft ware').sty le.display ="";
}
</script>
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_Softw
<table id="tbl_QuestionTags_Softw
<script language="javascript" type="text/javascript">
function ShowHide()
{
document.getElementById('t
}
</script>
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
ASKER
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!
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!
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
<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
<table id="tbl_QuestionTags_Softw are" border="1" bordercolor="red" cellpadding="0" cellspacing="0" style="width: 100%;Display=none"></table >
this will hide is at load
this will hide is at load
ASKER
>> Display =none
It hides it but then disables the check box function!
It hides it but then disables the check box function!
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('t bl_Questio nTags_Soft ware').sty le.visibil ity="hidde n";
document.getElementById('t bl_Questio nTags_Soft ware').sty le.height= "0";
document.getElementById('t bl_Questio nTags_Soft ware').sty le.width=" 0";
}
else {
document.getElementById('t bl_Questio nTags_Soft ware').sty le.visibil ity ="visible";
document.getElementById('t bl_Questio nTags_Soft ware').sty le.height= "";
document.getElementById('t bl_Questio nTags_Soft ware').sty le.width=" 100%";
}
}
like
<body onload="Show
function ShowHide(obj)
{
if(!obj.checked) {
document.getElementById('t
document.getElementById('t
document.getElementById('t
}
else {
document.getElementById('t
document.getElementById('t
document.getElementById('t
}
}
ASKER
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
asvforce,
You last function worked fine. And the display=none worked after i did a lower case!
pratima_mcs,
Thanks for your help!
You last function worked fine. And the display=none worked after i did a lower case!
pratima_mcs,
Thanks for your help!
<table id="tbl_QuestionTags_Softw
<script language="javascript" type="text/javascript">
function ShowHide(obj)
{
if(!obj.checked)
document.getElementById('t
else
document.getElementById('t
}
</script>