I’m learning how to work with AJAX and am experimenting with my first working example, which I got from a tutorial.
The script queries a database table filled with people’s names. It includes a field named Gender, which has only two values - M and F. A button then allows you to toggle back and forth between the two, displaying all the men featured in the table or all the women…
<form name='myForm'>
Born Before: <input type='text' id='Birth_Year'> <br>
Died Before: <input type='text' id='Died'>
<br>
Sex: <select id='Gender'>
<option value="M">M</option>
<option value="F">F</option>
</select>
<input type='button' onclick='ajaxFunction()'
value='Query MySQL'/>
</form>
I’d like to know if there’s a way to add a third option - display EVERYONE. I tried adding a third option value - <option value=“M_F”>All</option> and played around with radio buttons, but I don’t know what I’m doing.
I posted the code below. Thanks.
First page…
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
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;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var Gender = document.getElementById('Gender').value;
var Birth_Year = document.getElementById('Birth_Year').value;
var Died = document.getElementById('Died').value;
var queryString = "?Birth_Year=" + Birth_Year ;
queryString += "&Died=" + Died + "&Gender=" + Gender;
ajaxRequest.open("GET", "AjaxPeople2.php" +
queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name='myForm'>
Born Before: <input type='text' id='Birth_Year'> <br>
Died Before: <input type='text' id='Died'>
<br>
Sex: <select id='Gender'>
<option value="M">M</option>
<option value="F">F</option>
</select>
<input type='button' onclick='ajaxFunction()'
value='Query MySQL'/>
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>
Second Page…
$dsn = "mysql:host=localhost;dbname=db_new;charset=utf8";
$opt = array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
);
$pdo = new PDO($dsn,'(Username)','(Password)', $opt);
// Retrieve data from Query String
$Common = $_GET['Common'];
$Birth_Year = $_GET['Birth_Year'];
$Died = $_GET['Died'];
$Gender = $_GET['Gender'];
$Birth_ID = $_GET['Birth_ID'];
$Death_ID = $_GET['Death_ID'];
$sql= "SELECT * FROM people_bios PB
LEFT JOIN people P ON P.URL = PB.URL
WHERE Gender = :Gender AND Site = 'PX'";
if(is_numeric($Birth_Year)) {
$sql .= " AND Birth_Year <= :Birth_Year";
}
if(is_numeric($Died)) {
$sql .= " AND Died <= :Died";
}
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':Gender',$Gender,PDO::PARAM_STR);
if (is_numeric($Birth_Year)) {
$stmt->bindParam(':Birth_Year', $Birth_Year, PDO::PARAM_INT);
}
if(is_numeric($Died)) {
$stmt->bindParam(':Died', $Died, PDO::PARAM_INT);
}
$stmt->execute();
//Execute query
try {
$stmt->execute();
} catch (Exception $e) {
// print_r($e); // Do something more useful here, like log.
}
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Born</th>";
$display_string .= "<th>Died</th>";
$display_string .= "<th>Birth Place</th>";
$display_string .= "<th>Death Place</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while ($row = $stmt->fetch())
// while($row = mysql_fetch_array($qry_result))
{
$display_string .= "<tr>";
$display_string .= "<td>$row[Common]</td>";
$display_string .= "<td>$row[Birth_Year]</td>";
$display_string .= "<td>$row[Died]</td>";
$display_string .= "<td>$row[Birth_ID]</td>";
$display_string .= "<td>$row[Death_ID]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;