0

Hello guys, i want to populate a textbox based on the selected index of a combobox. For example, the textbox will only be displayed if the selected index is "5". But the problem is, i generate a series of comboboxes through a loop which is based on the number of columns in the database. I tried using javascript to hide the textbox but it only hide the last one. Help is much appreciate. Thanks
Here is my code:

<?php
          **some code**

          print "<select name=\"$tempID\" id=\"attDisplay\" onchange=\"hideThis()\" >";

                                      $result = mysql_query("SELECT `$tempID` FROM $attendancelist WHERE date='$theDate'");

                                      while ($row = mysql_fetch_array($result))
                                      {

                                              if($row["$tempID"] == 1)
                                              {
                                                  print "<option value=\"1\" selected=\"selected\">Present</option>";
                                                  print "<option class=\"absent\" value=\"2\">Absent</option>";
                                                  print "<option class=\"medical\" value=\"3\">Medical Leave</option>";
                                                  print "<option class=\"late\" value=\"4\">Late</option>";  
                                                  print "<option class=\"permission\" value=\"5\">With Permission</option>";                                   
                                                  print "</div>";
                                              }
                                              else if ($row["$tempID"] == 2)
                                              {
                                                  print "<option value=\"1\" >Present</option>";
                                                  print "<option class=\"absent\" value=\"2\" selected=\"selected\">Absent</option>";
                                                  print "<option class=\"medical\" value=\"3\">Medical Leave</option>";
                                                  print "<option class=\"late\" value=\"4\">Late</option>";
                                                  print "<option class=\"permission\" value=\"5\">With Permission</option>";
                                              }
                                              else if ($row["$tempID"] == 3)
                                              {
                                                  print "<option value=\"1\" >Present</option>";
                                                  print "<option class=\"absent\" value=\"2\">Absent</option>";
                                                  print "<option class=\"medical\" value=\"3\" selected=\"selected\">Medical Leave</option>";
                                                  print "<option class=\"late\" value=\"4\">Late</option>";
                                                  print "<option class=\"permission\" value=\"5\">With Permission</option>";
                                              }
                                              else if ($row["$tempID"] == 4)
                                              {
                                                  print "<option value=\"1\" >Present</option>";
                                                  print "<option class=\"absent\" value=\"2\">Absent</option>";
                                                  print "<option class=\"medical\" value=\"3\">Medical Leave</option>";
                                                  print "<option class=\"late\" value=\"4\" selected=\"selected\">Late</option>";
                                                  print "<option class=\"permission\" value=\"5\">With Permission</option>";
                                              }
                                              else if ($row["$tempID"] == 5)
                                              {
                                                  print "<option value=\"1\" >Present</option>";
                                                  print "<option class=\"absent\" value=\"2\">Absent</option>";
                                                  print "<option class=\"medical\" value=\"3\">Medical Leave</option>";
                                                  print "<option class=\"late\" value=\"4\" >Late</option>";
                                                  print "<option class=\"permission\" value=\"5\" selected=\"selected\">With Permission</option>";
                                              }


                                      }

                                      print "</select>";

                                          print "<input type=\"text\" name=\"$txtboxName\" id=\"permission\" size=\"20\" title=\"State Permission Here\" style=\"display:block;\"    />";        

                                      }
                                      print "</td>";                                   
                                      print "</tr>";

                                  }
?>

<script type="text/javascript">
function hideThis(){
if (document.getElementbyId("attDisplay").selectedIndex=="5"){  
document.getElementById("permission").style.display='block'; //show other options

else{   
document.getElementById("permission").style.display='none'; //hide other options
}
}
</script>
2
Contributors
1
Reply
8
Views
4 Years
Discussion Span
Last Post by lps
1

The way you do the looping is wrong. As you can see, if all field is generated, there are several text input field with same id.
My suggestion: maybe you can
add a $num = 0 before the while loop,
change id=\"permission\" into id=\"permission_$num\"
$num++ at the end of loop

By this way, you can hav a accurate id selected
var num = document.getElementbyId("attDisplay").selectedIndex;
document.getElementById("permission_"+num).style.display='block';
then make a loop to hide other

another way is using jquery to solve it
add class="none" to every input and other is the same as above, then use jquery:
var num = jQuery('#attDisplay').prop("selectedIndex");
jQuery('.none').hide();//hide all input field
jQuery("#permission_"+num).show();//show the element with corresponding id only

Edited by lps

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.