Hi,
I want to change this code so it take a postcode input from the user via a text area field and then the second field which is a drop down menu gets populated with suburbs corresponding to the postcode entered in the text area field.

Here is the list.php code ---------------------------------------------
Code:
require "config.php"; // database connection details 
echo "

function fillCategory(){ 
 // this function is used to fill the category list on load

";

$q1=mysql_query("select * from category");
echo mysql_error();
while($nt1=mysql_fetch_array($q1)){
echo "addOption(document.drop_list.Category, '$nt1[cat_id]', '$nt1[category]');";
}// end of while
?>
} // end of JS function

function SelectSubCat(){
// ON or after selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

// Collect all element of subcategory for various cat_id 

<?
// let us collect all cat_id and then collect all subcategory for each cat_id
$q2=mysql_query("select distinct(cat_id)  from subcategory");
// In the above query you can collect cat_id from category table also. 
while($nt2=mysql_fetch_array($q2)){
//echo "$nt2[cat_id]";
echo "if(document.drop_list.Category.value == '$nt2[cat_id]'){";
$q3=mysql_query("select subcategory from subcategory where cat_id='$nt2[cat_id]'");
while($nt3=mysql_fetch_array($q3)){
echo "addOption(document.drop_list.SubCat,'$nt3[subcategory]', '$nt3[subcategory]');";


} // end of while loop
echo "}"; // end of JS if condition

}
?>




}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}
Here is the html on the main page --------------------------------------


Code:
<script language="javascript" src="list.php"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">

<FORM name="drop_list" method="POST" >
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>

</body>

Here is the dump.txt file for the SQL Table ---------------------------

Code:
CREATE TABLE `category` (
  `cat_id` int(2) NOT NULL auto_increment,
  `category` varchar(25) NOT NULL default '',
  PRIMARY KEY  (`cat_id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;


-- 
-- Dumping data for table `category`
-- 

INSERT INTO `category` VALUES (1, 'Fruits');
INSERT INTO `category` VALUES (2, 'Colors');
INSERT INTO `category` VALUES (3, 'Games');
INSERT INTO `category` VALUES (4, 'Vehicles');

-- --------------------------------------------------------


-- 
-- Table structure for table `subcategory`
-- 


CREATE TABLE `subcategory` (
  `cat_id` int(2) NOT NULL default '0',
  `subcategory` varchar(25) NOT NULL default ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;


-- 
-- Dumping data for table `subcategory`
-- 


INSERT INTO `subcategory` VALUES (1, 'Mango');
INSERT INTO `subcategory` VALUES (1, 'Banana');
INSERT INTO `subcategory` VALUES (1, 'Orange');
INSERT INTO `subcategory` VALUES (1, 'Apple');
INSERT INTO `subcategory` VALUES (2, 'Red');
INSERT INTO `subcategory` VALUES (2, 'Blue');
INSERT INTO `subcategory` VALUES (2, 'Green');
INSERT INTO `subcategory` VALUES (2, 'Yellow');
INSERT INTO `subcategory` VALUES (3, 'Cricket');
INSERT INTO `subcategory` VALUES (3, 'Football');
INSERT INTO `subcategory` VALUES (3, 'Baseball');
INSERT INTO `subcategory` VALUES (3, 'Tennis');
INSERT INTO `subcategory` VALUES (4, 'Cars');
INSERT INTO `subcategory` VALUES (4, 'Trucks');
INSERT INTO `subcategory` VALUES (4, 'Blkes');
INSERT INTO `subcategory` VALUES (4, 'Train');

PLEASE HELP!!!