Fill second combo box and eanble it on change of first combo box

salathia_partap

I have two combo boxes. On page load first combo box automatically fills the value from the database. Its working fine up to so far. Now what i want, on page load the second combo box should be disable and when i click on the first combo box, second combo box should be enable and fetches the value from the database on the bases of combo box 1 value and display in the second combo.....

My partial code is as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" href="css/master.css">
<link rel="stylesheet" media="screen" href="css/menus.css">

<title>Phytec India</title>


<script type = "text/javascript">

window.onload = test1;
function test1()
{

document.myform.combo_desgid.disabled=true;
}


</script>




</head>






<body onload="test1();">


<form name="my_form" method="POST" action=<?php 
	if(isset($_POST['s_close']))
	{
		header("location:depdesg.php");	
	}
	elseif(isset($_POST["btn_save"]))
	{	
		"newdepdesg.php";

}
?>

<div id="welcome">
	<div id="welcome_text">Welcome <?php echo "$local_session" ?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="logout.php">Signout</a></div>
</div>
<div id="header">
    	<div id="header_logo">
        	<img src="Images/logo.gif" height="29" width="178" />
        </div>
  </div>

 <table width="auto" align="center" border="0" cellspacing="0" cellpadding="0">
        <tr>
        	<td colspan="4"></td>
       </tr>

    <tr>
    	 <td>
        	<div id="text_labels">
            	<label>Department Id :</label>
            </div>
         </td>


        <td id="table_controls" >
        	 <div id="text_controls">

                  <?php 

              	  echo "<select style='width:150px'   name='combo_deptid'>\n";
  				  echo "<option>-- Department ID --</option>\n";

				  $query = "SELECT DeptId FROM table_mstr_department";
				  $result = mysql_query($query);


 					  while ($row = mysql_fetch_array($result))
   					   // Add a new option to the combo-box
    					  echo "<option value='$row[DeptId]'>$row[DeptId]</option>\n";

    			// End the combo-box
  			  echo "</select>\n";

             	 ?>

             <span class="error"><?php echo $empidErr;?></span>
            </div>
        </td>
    </tr>



    <tr>
    	 <td>
        	<div id="text_labels">
            	<label>Designation Id :</label>
            </div>
         </td>


        <td id="table_controls" >
        	 <div id="text_controls">

                  <?php 

              	  echo "<select style='width:150px' name='combo_desgid'>\n";
  				  echo "<option>-- Employee ID --</option>\n";

				  $query = "SELECT DesgId FROM table_mstr_designation WHERE DesgId NOT IN ( SELECT DISTINCT DesgId FROM table_dept_desg)";
				  $result = mysql_query($query);


 					  while ($row = mysql_fetch_array($result))
   					   // Add a new option to the combo-box
    					  echo "<option value='$row[EmpId]'>$row[EmpId]</option>\n";

    			// End the combo-box
  			  echo "</select>\n";

             	 ?>

             <span class="error"><?php echo $empidErr;?></span>
            </div>
        </td>
    </tr>



    </table>

Bonesnap

This is something that's accomplished through an AJAX call with JavaScript. jQuery has made AJAX calls very streamlined and easy.

Broadly speaking, you'd be doing the following:

Attaching an event to the first drop down so when it changes, it sends the ID to the AJAX call
The AJAX call is pointed to a PHP script that does the querying of the database (the ID is passed along)
It returns the results to the AJAX call in your JavaScript file, and from there you do what you want with it (in this case, populate a second drop down)