Linking 2 SELECT boxes using an SQL Database - PHP - php

Question

So, im creating a form that will submit data into an SQL database. Ive got 2 select drop downs that hold the data of "Module Code" and "Module Title". In the database a module title will only have one module code e.g Team project(module title) has module code 11COB290.
How can i get it so that when a user selects a given module name OR Module title is will automatically select the correct partner i.e select the right module code thats related to the module name the user has selected without pressing any submit buttons?
The following code is the drop down select boxes and php code i have so far:
<td align="center">
<select name='ModuleTitle' id='ModuleTitle' style='width:100%;'>
<option>Select...</option>
<?php
//3. Perform database query
$result = mysql_query("SELECT * FROM Module
ORDER BY `ModTitle` ASC;", $connection);
if(!$result){
die("Database query failed: " . mysql_error());
}
//4. Use Returned Data
while ($row = mysql_fetch_array($result)) {
$module = $row[2];
echo "<option name='{$module}'>{$module}</option><br />";
}
?>
</select>
</td>
<td align="center">
<select name='ModuleCode' id='ModuleCode' style='width:100%;'>
<option>Select...</option>
<?php
//3. Perform database query
$result = mysql_query("SELECT * FROM Module
ORDER BY `ModCode` ASC;", $connection);
if(!$result){
die("Database query failed: " . mysql_error());
}
//4. Use Returned Data
while ($row = mysql_fetch_array($result)) {
$module = $row[3];
echo "<option name='{$module}'>{$module}</option><br />";
}
?>
</select>
</td>

Answer 1

Unless there is a special reason to do so, why not give a single SELECT box instead of two?
<td align="center">
<select name='ModuleTitle' id='ModuleTitle' style='width:100%;'>
<option>Select...</option>
<?php
//3. Perform database query
$result = mysql_query("SELECT * FROM Module ORDER BY `ModTitle` ASC;", $connection);
if(!$result){
die("Database query failed: " . mysql_error());
}
//4. Use Returned Data
while ($row = mysql_fetch_array($result)) {
$module = $row[2] . ' (' . $row[3] . ')';
$moduleCode = $row[3];
echo "<option value='{$moduleCode}'>{$module}</option>";
}
?>
</select>
</td>
Or otherwise if you would like to keep 2 SELECTs, use AJAX calls. The idea is to define onChange event on each SELECT and in that event, send an AJAX request to a PHP script. The PHP script will request the module code or title and send it back to the AJAX handler. The AJAX handler can then automatically mark as SELECTED the corresponding option in the other SELECT. You might need sometime to research on AJAX and JavaScript if you aren't already experienced with this stuff.
Another idea might be to use the module code as the value for the title SELECT and module title as the value for the code SELECT. For example, title SELECT will be:
<SELECT name="ModuleTitle" id="ModuleTitle" style="width:100%;">
<OPTION>Select...</option>
<OPTION value="123">Title 123</OPTION>
<OPTION value="345">Title 345</OPTION>
<OPTION value="567">Title 567</OPTION>
</SELECT>
Then in the onChange event handler you might do something like this:
var selObj = document.getElementById('ModuleTitle');
var selIndex = selObj.selectedIndex;
document.getElementById('ModuleCode').value = selObj.option[selIndex].text;
By the way, there is no "name" attribute for . It should be "value" instead. Please fix in your code.
Hope it helps!
CAUTION: none of the above code is tested but I hope it works fine