I recently started a project which has a database of rail cars for a train simulator. Im trying to set up a way to filter the data based upon 4 categories "Car Type", "Road Name", "Pack", and "Area of Origin". I was able to get the dropdown menus to work but they way I did it seems a bit cumbersome. Essentially I have 4 Jquery Ajax scripts one for each dropdown menu each tied to their own specific php file to run the query. Is there a way to consolidate these 4 files into perhaps 1 file that does the same thing? Below is my code.
Index.php (The car directory main page)
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showType(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","type.php?t="+str,true);
xmlhttp.send();
}
}
function showRoad(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","road.php?r="+str,true);
xmlhttp.send();
}
}
function showPack(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","pack.php?p="+str,true);
xmlhttp.send();
}
}
</script>
<style type="text/css">
#infoPicture{
width: 200px;
height: 113px;
float: left;
}
#infoInfo{
height: 200px;
width: auto;
float: left;
}
</style>
</head>
<body>
<form>
<?php
include ("includes/dbh.inc.php");
//$query = "SELECT * FROM categories WHERE catagoryID = $catagoryID AND catagoryName = $catagoryName";
//Type Dropdown
$type = mysqli_query($conn, "SELECT * FROM types");
echo '<select onchange="showType(this.value)" name"CarTypes">';
echo '<option>' . 'Car Type' . '</option>';
while ($row = mysqli_fetch_array($type)) {
echo '<option value"' . $row['typeName'] .'">' . $row['typeName'] . '</option>';
}
echo '</select>';
//Road Dropdown
$road = mysqli_query($conn, "SELECT * FROM roads");
echo '<select onchange="showRoad(this.value)" name"RoadNames">';
echo '<option>' . 'Road Name' . '</option>';
while ($row = mysqli_fetch_array($road)) {
echo '<option value"' . $row['roadName']. '">' . $row['roadName'] . ' ('.$row['reportingMark']. ')</option>';
}
echo '</select>';
//Pack Dropdown
$pack = mysqli_query($conn, "SELECT * FROM packs");
echo '<select onchange="showPack(this.value)" name"AddonPack">';
echo '<option>' . 'Add on Pack' . '</option>';
while ($row = mysqli_fetch_array($pack)) {
echo '<option value"' . $row['packID'] .'">' . $row['packName'] . '</option>';
}
echo '</select>';
//Origin Dropdown
$origin = mysqli_query($conn, "SELECT * FROM origins");
echo '<select onchange="showOrigin(this.value)" name"Origins">';
echo '<option>' . 'Area of Origin' . '</option>';
while ($row = mysqli_fetch_array($origin)) {
echo '<option value"' . $row['originID'] .'">' . $row['origin'] . '</option>';
}
echo '</select>';
?>
<a href="index.php">Show All</a>
</form>
Type.php I only included one of these as all four are essentially the same but with slightly different queries
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<?php
include_once 'includes/dbh.inc.php';
if(isset($_GET['t'])){
$t = $_GET['t'];
}else{
$t = "Name not set in the GET method";
}
$sql="SELECT * FROM rollingstock WHERE stockType = '".$t."'";
$result = mysqli_query($conn, $sql);
echo '<table border="0">';
if ($result-> num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
//echo '<div class="listing-picture" style="background-color:#bbb">';
echo '<tr><td>';
echo '<img src="images/Coil_2.png"/>';
echo '</td>';
echo '<td width ="500">';
echo $row["stockName"];
echo '<br>';
echo $row["stockPack"];
echo '<br>';
echo $row["stockLink"];
echo '<br>';
echo $row["stockDesc"];
echo '</td></tr>';
}
echo '</table>';
}else{
echo "Nothing Found!";
}
?>
```
