By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,471 Members | 711 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,471 IT Pros & Developers. It's quick & easy.

show hide script not working

P: 1
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):
Expand|Select|Wrap|Line Numbers
  1. function showIt($id) {
  2.     alert("ID is : $id");
  3.     switch ($id) {
  4.  
  5.     case 1:
  6.         if(document.getElementById('service-tbl1').style.visibility="hidden") {
  7.             document.getElementById('service-tbl1').style.visibility="visible";
  8.         } else {
  9.             document.getElementById('service-tbl1').style.visibility="hidden";
  10.         }
  11.         break;
  12.     case 2:
  13.         if(document.getElementById('service-tbl2').style.visibility="hidden") {
  14.             document.getElementById('service-tbl2').style.visibility="visible";
  15.         } else {
  16.             document.getElementById('service-tbl2').style.visibility="hidden";
  17.         }
  18.         break;
  19.     case 3:
  20.         if(document.getElementById('service-tbl3').style.visibility="hidden") {
  21.             document.getElementById('service-tbl3').style.visibility="visible";
  22.         } else {
  23.             document.getElementById('service-tbl3').style.visibility="hidden";
  24.         }
  25.         break;
  26.     case 4:
  27.         if(document.getElementById('service-tbl4').style.visibility="hidden") {
  28.             document.getElementById('service-tbl4').style.visibility="visible";
  29.         } else {
  30.             document.getElementById('service-tbl4').style.visibility="hidden";
  31.         }
  32.         break;
  33.     case 5:
  34.         if(document.getElementById('service-tbl5').style.visibility="hidden") {
  35.             document.getElementById('service-tbl5').style.visibility="visible";
  36.         } else {
  37.             document.getElementById('service-tbl5').style.visibility="hidden";
  38.         }
  39.         break;
  40.     case 6:
  41.         if(document.getElementById('service-tbl6').style.visibility="hidden") {
  42.             document.getElementById('service-tbl6').style.visibility="visible";
  43.         } else {
  44.             document.getElementById('service-tbl6').style.visibility="hidden";
  45.         }
  46.         break;
  47.     case 7:
  48.         if(document.getElementById('service-tbl7').style.visibility="hidden") {
  49.             document.getElementById('service-tbl7').style.visibility="visible";
  50.         } else {
  51.             document.getElementById('service-tbl7').style.visibility="hidden";
  52.         }
  53.         break;
  54.     case 8:
  55.         if(document.getElementById('service-tbl8').style.visibility="hidden") {
  56.             document.getElementById('service-tbl8').style.visibility="visible";
  57.         } else {
  58.             document.getElementById('service-tbl8').style.visibility="hidden";
  59.         }
  60.         break;
  61.     }
  62. }
  63.  
The checkboxes are generated dynamically inside of a repeat region. Here is the code:

Expand|Select|Wrap|Line Numbers
  1. <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>
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:

Expand|Select|Wrap|Line Numbers
  1. <tr bgcolor="#CCCCCC">
  2.                         <td width="47%" class="dboutput"><label for="airport_id">Vancouver&nbsp;(YVR)</label></td>
  3.  
  4.                         <td width="19%" class="dark"><input name="airport_id[1]" type="checkbox" id="airport_id[1]" value="1" onClick = "showIt(1);" /></td>
  5.                         <td><table width="100%" border="0" id="service-tbl1"  style="visibility: hidden">
  6.                                                         <tr>
  7.                               <td>                                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  8.                                     <tr bgcolor="#999999">
  9.                                       <td class="td-s_chk"><input type="checkbox" id="airport_id[1][]" name="airport_id[1][]" value="1" /></td>
  10.                                       <td class="dboutputright">Jet</td>
  11.                                     </tr>
  12.  
  13.                                   </table>
  14.                                                                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  15.                                     <tr bgcolor="#CCCCCC">
  16.                                       <td class="td-s_chk"><input type="checkbox" id="airport_id[1][]" name="airport_id[1][]" value="2" /></td>
  17.                                       <td class="dboutputright">Ground</td>
  18.                                     </tr>
  19.                                   </table>
  20.                                                                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  21.  
  22.                                     <tr bgcolor="#999999">
  23.                                       <td class="td-s_chk"><input type="checkbox" id="airport_id[1][]" name="airport_id[1][]" value="3" /></td>
  24.                                       <td class="dboutputright">Glycol</td>
  25.                                     </tr>
  26.                                   </table>
  27.                               </td>
  28.                             </tr>
  29.                           </table>
  30.  
  31.                         <label for="service_id_jet"></label></td>
  32.                       </tr>
  33.                                             <tr bgcolor="#ABB4B3">
  34.                         <td width="47%" class="dboutput"><label for="airport_id">Calgary&nbsp;(YYC)</label></td>
  35.                         <td width="19%" class="dark"><input name="airport_id[2]" type="checkbox" id="airport_id[2]" value="2" onClick = "showIt(2);" /></td>
  36.                         <td><table width="100%" border="0" id="service-tbl2"  style="visibility: hidden">
  37.                                                         <tr>
  38.                               <td>                                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  39.  
  40.                                     <tr bgcolor="#CCCCCC">
  41.                                       <td class="td-s_chk"><input type="checkbox" id="airport_id[2][]" name="airport_id[2][]" value="1" /></td>
  42.                                       <td class="dboutputright">Jet</td>
  43.                                     </tr>
  44.                                   </table>
  45.                                                                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  46.                                     <tr bgcolor="#999999">
  47.                                       <td class="td-s_chk"><input type="checkbox" id="airport_id[2][]" name="airport_id[2][]" value="2" /></td>
  48.  
  49.                                       <td class="dboutputright">Ground</td>
  50.                                     </tr>
  51.                                   </table>
  52.                                                                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  53.                                     <tr bgcolor="#CCCCCC">
  54.                                       <td class="td-s_chk"><input type="checkbox" id="airport_id[2][]" name="airport_id[2][]" value="3" /></td>
  55.                                       <td class="dboutputright">Glycol</td>
  56.                                     </tr>
  57.  
  58.                                   </table>
  59.                               </td>
  60.                             </tr>
  61.                           </table>
  62.                         <label for="service_id_jet"></label></td>
  63.                       </tr>
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
Dec 3 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
First of all, welcome to Bytes!

Instead of a switch, use the ID of the checkbox to generate the ID of the table, e.g. "service-tbl"+$id, then you can get rid of all the duplicated code. One major problem is that in your if statements, you aren't comparing, you're setting the value with a single equal. Use double equals.

To hide the table too, check the checked status of the checkbox and depending on whether it's true or false, you can use an if statement to show or hide.
Dec 4 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.