php drop down how to control the hide and show

Question

Hi all,

i want to control the drop down box to control show or hide statement. I do like this but it seems it doesn't work, i have it working if im using radio button.

can help me with the code? which part am i wrong?

thank you.

$dbcnx = mysql_connect('localhost', 'root', '');
mysql_select_db('dbase');

if($_POST['gred'])$gred=$_POST['gred'];else $gred="";

<script language="JavaScript">  
function funcHide(elemHide1,elemHide2,elemHide3)
    {
        document.getElementById(elemHide1).style.display = 'none';
        document.getElementById(elemHide2).style.display = 'none';
        document.getElementById(elemHide3).style.display = 'none';
        document.getElementById(elemShow).style.visibility = 'visible';
    }

 function funcShow(elemShow1,elemShow2,elemShow3)
    {
        document.getElementById(elemShow1).style.display = 'block';
        document.getElementById(elemShow2).style.display = 'block';
        document.getElementById(elemShow3).style.display = 'block';
        document.getElementById(elemShow1).style.visibility = 'visible';
        document.getElementById(elemShow2).style.visibility = 'visible';
        document.getElementById(elemShow3).style.visibility = 'visible';
    }
   </script>

 <table>
 <tr>
        <td>Gred </td>
        <td>:</td>
        <td><select name="gred" id="gred">
          <option value="">&nbsp;</option>          
          <option value="A17" <?php if($gred=='A17')echo "selected";?>  onClick="funcShow('box1', 'box2', 'box3');">A17</option>
      <option value="A22" <?php if($gred=='A22')echo "selected";?>>A22</option>
      <option value="A27" <?php if($gred=='A27')echo "selected";?>>A27</option>
</select>

</td>
  </tr>

  <tr>
        <td>TK</td>
        <td>:</td>
        <td>        
    <select name="tk" id="tk">
    <option value="">&nbsp;</option>    
    <option value="01" <?php if($tk=='01')echo "selected";?>>01</option>
    <option value="02" <?php if($tk=='02')echo "selected";?>>02</option>
    <option value="03" <?php if($tk=='03')echo "selected";?>>03</option>
    <option value="04" <?php if($tk=='04')echo "selected";?>>04</option>
    <option value="05" <?php if($tk=='05')echo "selected";?>>05</option>
    <option value="06" <?php if($tk=='06')echo "selected";?>>06</option>
    </select>
    <?} ?>
        </td>
</tr>         
<tr>
<td colspan="2" valign="top">Status</td>
<td valign="top">:</td>
<td>
    <?php
    $qry = "SELECT * from dtable where userid='".$USER->id."'";
    $sql = mysql_query($qry);
    $row = mysql_num_rows($sql);
    if($row==0)
    { 
    ?>
    <input type=radio name="status" <?php if($status=='retake')      {?>checked="checked"<?php } ?> value="retake" onClick="funcShow('box1', 'box2', 'box3');">Retake<br /></tr> <tr>
<td colspan='2'>
<div id="box1" style="display: none;">Last Date <br> Latest Date<br>
</div></td>
<td><div id="box2" style="display: none;">: <br> : <br></div></td>
<td>
<div id="box3" style="display: none;">
<?php $rsu[lastdate] ?> <br> <?php $rsu[latestdate] ?> 
</div>
</td>

Answer 1

Use onChange to trigger JS when you change something in the dropdown menu, instead of onClick. With selectedIndex you can determine what has been selected (the option 'show' or 'hide') and go from there.

Tip: get rid of all the junk code and limit it to just the elements that you need. Try to make it work in its most basic form, then build it out to what you're actually trying to do. That way it's a lot easier to track bugs and find out why it's not working.

Also, you might want to look into jQuery. You can do pretty much the same in plain old JavaScript, but jQuery makes things like this a lot easier.

Answer 2

don't put the onClick attribute onto the option tag. You should use onChange on the select tag and then pass in this.value. Then based on that value you can decide which "box" to show/hide. Just a simple example:

<script type="text/javascript">
function showHide(selValue){
    switch(selValue){
        case "A17":
            //show/hide whatever box you want.
            alert(selValue);
            break;
        default:
            //do nothing
            alert('nothing');
    }
}
</script>
<select name="gred" id="gred" onChange="showHide(this.value);">
    <option value="">&nbsp;</option>          
    <option value="A17"<?php if($gred=='A17')echo "selected";?>>A17</option>
    <option value="A22" <?php if($gred=='A22')echo "selected";?>>A22</option>
    <option value="A27" <?php if($gred=='A27')echo "selected";?>>A27</option>
</select>

for now, as you can tell, it just alerts some values. But it is easy to change.