Tizag.com has much better example code than www3.
page 1, input form:
<html> <head>
<script type="text/javascript">
function showUser(str){
var ajaxRequest; // The variable that makes Ajax possible!
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('txtHint');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET","getuser.php?q="+str,true);
ajaxRequest.send(null);
}
function showSex(str){
var ajaxRequest; // The variable that makes Ajax possible!
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('txtHint');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET","getsex.php?q="+str,true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
<select name="sex" onchange="showSex(this.value)">
<option value="">Male/Female:</option>
<option value="1">All</option>
<option value="2">Male</option>
<option value="3">Female</option>
</select> </form>
<div id="txtHint"><b>Person info will be listed here.</b></div> </body> </html>Page 2: getuser.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> <th>Sex</th></tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['job'] . "</td>";
echo "<td>" . $row['sex'] . "</td>";
echo "</tr>"; }
echo "</table>";
mysql_close($con);
?>page 3, getsex.php (as referenced from input form)
<?php
$q=$_GET["q"];
// check for your q values, 1 = all, 2 = M, 3 = F
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
// based on the value passed in we may have to change query, if all run this...
if ($q == 1) {
$sql="SELECT * FROM user";
} else if($q == 2){
$sql="SELECT * FROM user WHERE sex = 'M'";
} else if($q == 3){
$sql="SELECT * FROM user WHERE sex = 'F'";
}
$result = mysql_query($sql);
echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> <th>Sex</th></tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['job'] . "</td>";
echo "<td>" . $row['sex'] . "</td>";
echo "</tr>"; }
echo "</table>";
mysql_close($con);
?>
I actually named a database ajax_demo, and a table named user ...you can make it if you wish:
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`FirstName` text,
`LastName` text,
`Age` int(11) DEFAULT NULL,
`Hometown` text,
`job` text,
`sex` enum('M','F') NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`id`, `FirstName`, `LastName`, `Age`, `Hometown`, `job`, `sex`) VALUES
(1, 'Peter', 'Griffin', 41, 'Quahog', 'Brewery', 'M'),
(2, 'Lois', 'Griffin', 40, 'Newport', 'Piano Teacher', 'F'),
(3, 'Joseph', 'Swanson', 39, 'Newport', 'Police Officer', 'M'),
(4, 'Glenn', 'Quagmire', 41, 'Newport', 'Pilot', 'M');
I used the txtHnt field to display both return values, however you can rename the div in the second instance if you do not want it in the same spot.
This all actually works if you make the db, and the proper connection to it.
Enjoy
