Using AJAX to Populate Dropdown menu

PHP
2

Try this:

create database if not exists `school`;

USE `school`;

CREATE TABLE `tbl_schools` (
  `Id` int(11) unsigned NOT NULL auto_increment,
  `Name` varchar(50) NOT NULL,
  PRIMARY KEY  (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=11;

insert  into `tbl_schools`(`Id`,`Name`) values (1,'School 1'),(2,'School 2'),(3,'School 3'),(4,'School 4');

ajaxform.php:


<?php
	$link = mysql_connect("localhost","root","");
	$db = mysql_select_db("school",$link);
	
	if(isset($_POST['mode'])){
		//print_r($_POST);
		mysql_query("INSERT INTO tbl_schools (Name) VALUES ('".$_POST['data']."')", $link);
		
		$rsSchool = mysql_query("SELECT * FROM tbl_schools", $link);
		$strOptions = '';
		while($rowSchool = mysql_fetch_assoc($rsSchool)){
			$strOptions .= '<option value="'.$rowSchool['Id'].'">'.$rowSchool['Name'].'</option>';
		}
		echo $strOptions;
		exit;
	}
?>

ajaxform.php:


<!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=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
// JavaScript Document
function getHTTPObject(){
	var request_o; //declare the variable to hold the object.
	var browser = navigator.appName; //find the browser name
	if(browser == "Microsoft Internet Explorer"){
		/* Create the object using MSIE's method */
		request_o = new ActiveXObject("Microsoft.XMLHTTP");
	}else{
		/* Create the object using other browser's method */
		request_o = new XMLHttpRequest();
	}
	return request_o; //return the object
}
var http = getHTTPObject(); // We create the HTTP Object

function xmlHandlerPost(outputData, inputData) { 
	if(inputData=="")
		return false;
		
	var vars = "mode=add&data=" + inputData;
	var url = "ajaxform.php";
	
	http.open("POST", url , true);
	http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
  http.onreadystatechange = function() {  
  
		if (http.readyState == 4) {     
			results = http.responseText 
			//alert(results);
			document.getElementById(outputData).innerHTML = results;
		};
  }    
  http.send(vars);
}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
<p>
//****** This needs to be populated dynamically using php ajax from MySQL. ****///
<select name="select" id="listSchools" onchange="populate();">
<?php
	$rsSchool = mysql_query("SELECT * FROM tbl_schools", $link);
	while($rowSchool = mysql_fetch_assoc($rsSchool)){
		echo '<option value="'.$rowSchool['Id'].'">'.$rowSchool['Name'].'</option>';
	}
?>
</select>
</p>
<p>
Add new school:<br />
<input type="text" name="school_name" size="30" /><br />
<input type="button" name="submit" value="submit" onclick="xmlHandlerPost('listSchools',this.form.school_name.value)" />
</p>
</form>
</body>
</html>