show hide script not working

[filch]

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):

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;
    }
}
 

The checkboxes are generated dynamically inside of a repeat region. Here is the 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>

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:

<tr bgcolor="#CCCCCC">
                        <td width="47%" class="dboutput"><label for="airport_id">Vancouver&nbsp;(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&nbsp;(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>

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

[acoder]

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.