Hi,
I am new to this forum ... so hello to all!
I am trying to get a script working which will show or hide a table based on a user checking or unchecking a parent checkbox. This is the script I have come up with so far (note that one of my issues is whether or not you can use an if/else construct inside of a case statement):
The checkboxes are generated dynamically inside of a repeat region. Here is the code:
This is a snippit of the total code. Essentially, the onClick event is supposed to trigger the showIt() function. The bit of php code there contains an id from 1 to 8 , which is incremetally generated from a dB table. This is supposed to trigger the function and load the current value from 1 to 8 into the $id variable. It is not functioning and I see a js error stating that showIt() is undefined. However, if I look at the generated source, each row (checkbox) shows an onClick=showIt( 1 - 8) . See below for two of the rows:
Hope this is not too unclear and this post is not too long. Can anybody see why this is not working. And, if possible to take this further, how can I amend my code to reset the table to hidden if the user changes their mind and unclicks the parent checkbox.
Cheers,
Dave
I am new to this forum ... so hello to all!
I am trying to get a script working which will show or hide a table based on a user checking or unchecking a parent checkbox. This is the script I have come up with so far (note that one of my issues is whether or not you can use an if/else construct inside of a case statement):
Code:
function showIt($id) {
alert("ID is : $id");
switch ($id) {
case 1:
if(document.getElementById('service-tbl1').style.visibility="hidden") {
document.getElementById('service-tbl1').style.visibility="visible";
} else {
document.getElementById('service-tbl1').style.visibility="hidden";
}
break;
case 2:
if(document.getElementById('service-tbl2').style.visibility="hidden") {
document.getElementById('service-tbl2').style.visibility="visible";
} else {
document.getElementById('service-tbl2').style.visibility="hidden";
}
break;
case 3:
if(document.getElementById('service-tbl3').style.visibility="hidden") {
document.getElementById('service-tbl3').style.visibility="visible";
} else {
document.getElementById('service-tbl3').style.visibility="hidden";
}
break;
case 4:
if(document.getElementById('service-tbl4').style.visibility="hidden") {
document.getElementById('service-tbl4').style.visibility="visible";
} else {
document.getElementById('service-tbl4').style.visibility="hidden";
}
break;
case 5:
if(document.getElementById('service-tbl5').style.visibility="hidden") {
document.getElementById('service-tbl5').style.visibility="visible";
} else {
document.getElementById('service-tbl5').style.visibility="hidden";
}
break;
case 6:
if(document.getElementById('service-tbl6').style.visibility="hidden") {
document.getElementById('service-tbl6').style.visibility="visible";
} else {
document.getElementById('service-tbl6').style.visibility="hidden";
}
break;
case 7:
if(document.getElementById('service-tbl7').style.visibility="hidden") {
document.getElementById('service-tbl7').style.visibility="visible";
} else {
document.getElementById('service-tbl7').style.visibility="hidden";
}
break;
case 8:
if(document.getElementById('service-tbl8').style.visibility="hidden") {
document.getElementById('service-tbl8').style.visibility="visible";
} else {
document.getElementById('service-tbl8').style.visibility="hidden";
}
break;
}
}
Code:
<td width="19%" class="dark"><input name="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]" type="checkbox" id="airport_id[<?php echo $row_rsAirports['airport_id']; ?>]" value="<?php echo $row_rsAirports['airport_id']; ?>" onClick = "showIt(<?php echo $row_rsAirports['airport_id'] ?>);" /></td>
Code:
<tr bgcolor="#CCCCCC">
<td width="47%" class="dboutput"><label for="airport_id">Vancouver (YVR)</label></td>
<td width="19%" class="dark"><input name="airport_id[1]" type="checkbox" id="airport_id[1]" value="1" onClick = "showIt(1);" /></td>
<td><table width="100%" border="0" id="service-tbl1" style="visibility: hidden">
<tr>
<td> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#999999">
<td class="td-s_chk"><input type="checkbox" id="airport_id[1][]" name="airport_id[1][]" value="1" /></td>
<td class="dboutputright">Jet</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td class="td-s_chk"><input type="checkbox" id="airport_id[1][]" name="airport_id[1][]" value="2" /></td>
<td class="dboutputright">Ground</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#999999">
<td class="td-s_chk"><input type="checkbox" id="airport_id[1][]" name="airport_id[1][]" value="3" /></td>
<td class="dboutputright">Glycol</td>
</tr>
</table>
</td>
</tr>
</table>
<label for="service_id_jet"></label></td>
</tr>
<tr bgcolor="#ABB4B3">
<td width="47%" class="dboutput"><label for="airport_id">Calgary (YYC)</label></td>
<td width="19%" class="dark"><input name="airport_id[2]" type="checkbox" id="airport_id[2]" value="2" onClick = "showIt(2);" /></td>
<td><table width="100%" border="0" id="service-tbl2" style="visibility: hidden">
<tr>
<td> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td class="td-s_chk"><input type="checkbox" id="airport_id[2][]" name="airport_id[2][]" value="1" /></td>
<td class="dboutputright">Jet</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#999999">
<td class="td-s_chk"><input type="checkbox" id="airport_id[2][]" name="airport_id[2][]" value="2" /></td>
<td class="dboutputright">Ground</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#CCCCCC">
<td class="td-s_chk"><input type="checkbox" id="airport_id[2][]" name="airport_id[2][]" value="3" /></td>
<td class="dboutputright">Glycol</td>
</tr>
</table>
</td>
</tr>
</table>
<label for="service_id_jet"></label></td>
</tr>
Cheers,
Dave
Comment