Multiple selection boxes to search a database

I've changed the code with the selection boxes to the below:

<html>

<head>
<script type="text/javascript">

function loadXMLDoc() {
var xmlhttp;
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 (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.frm.modelSelection.innerHTML=xmlhttp.responseText;
    }
}

var makevalue=document.frm.makeSelection.value;

xmlhttp.open("GET","http://www.autodeal.co.za/newsite/model-selection?ajaxmake="+‌makevalue,true);
xmlhttp.send();
}

</script>
</head>

<body>

<?php 

$dbName = "F:/Domains/autodeal/autodeal.co.za/wwwroot/newsite/db/savvyautoweb.mdb";

// Throws an error if the database cannot be found
if (!file_exists($dbName)) {
    die("Could not find database file.");
}

// Connects to the database
// Assumes there is no username or password
$conn = odbc_connect("Driver={Microsoft Access Driver (*.mdb)};Dbq=$dbName", '', '');

?>

<form action="index.php?option=com_content&view=article&id=99" method="post" name="frm">

<select name="makeSelection" onchange="loadXMLDoc()">

<?php
//Loads the Makes from the database into a dropdown
$resultMake = odbc_exec($conn, "SELECT DISTINCT Make FROM Vehicle ORDER BY Make") or die (odbc_errormsg());
while ($rowMake = odbc_fetch_array($resultMake)) {
    echo "<option value='$rowMake[Make]'>$rowMake[Make]</option>";

}

?>
</select><br />

    <select name="modelSelection">

    </select><br />

    <select name="yearSelection">
        <option>2004</option>
        <option>2005</option>
        <option>2006</option>
        <option>2007</option>
        <option>2008</option>
        <option>2009</option>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
    </select><br />

    <select name="priceSelection">
        <option>< 5000</option>
        <option>5000 - 20 000</option>
        <option>20 000 - 50 000</option>
        <option>50 000 - 100 000</option>
        <option>100 000 - 200 000</option>
        <option>200 000 - 300 000</option>
        <option>300 000 - 400 000</option>
        <option>400 000 - 500 000</option>
        <option>50 000 - 1 000 000</option>
        <option>> 1 000 000</option>
    </select>

<input type="submit" name="submit" value="Go">
</form>

</body>
</html>

Hi,

I've updated the code to reflect the answers below, but now, when you make the first selection, the Model selection box remains empty.

modelSelection.php

<?php
        $dbName = "F:/Domains/autodeal/autodeal.co.za/wwwroot/newsite/db/savvyautoweb.mdb";

        // Throws an error if the database cannot be found
        if (!file_exists($dbName)) {
            die("Could not find database file.");
        }

        $conn = odbc_connect("Driver={Microsoft Access Driver (*.mdb)};Dbq=$dbName", '', '');
        //loads the models based on the makes selection into a dependant dropdown
        if (isset($_REQUEST['ajaxmake'])) {

            $resultModel = odbc_exec($conn, "SELECT Model FROM Vehicle WHERE Make = '".$_REQUEST['ajaxmake']."'") or die (odbc_errormsg());

                while ($rowModel = odbc_fetch_array($resultModel)) {

                    echo "<option value='$rowModel[Model]'>$rowModel[Model]</option>";
                    die(); //I'm not sure where to put this because I assume this is the reason why this selection must be first
                }

        }

?>

Solution

As far as I can see, the problem is that you are loading the whole request response text inside a select button. I've looked at your request response and it is responding the whole page with the models loaded, so basically it is getting all options and loading them on the Model select box, because you are inserting the whole page on the model select box.

You have multiple options here: You can create a page that only loads the Model options, so have a file which has only this part:

            $dbName = "F:/Domains/autodeal/autodeal.co.za/wwwroot/newsite/db/savvyautoweb.mdb";

            // Throws an error if the database cannot be found
            if (!file_exists($dbName)) {
                die("Could not find database file.");
            }

            $conn = odbc_connect("Driver={Microsoft Access Driver (*.mdb)};Dbq=$dbName", '', '');
            //loads the models based on the makes selection into a dependant dropdown
            if (isset($_REQUEST['ajaxmake'])) {

                $resultModel = odbc_exec($conn, "SELECT Model FROM Vehicle WHERE Make = '".$_REQUEST['ajaxmake']."'") or die (odbc_errormsg());

                    while ($rowModel = odbc_fetch_array($resultModel)) {

                        echo "<option value='$rowModel[Model]'>$rowModel[Model]</option>";
                    }

            }

And change the page you are calling through ajax to point to that page:

 xmlhttp.open("GET","newpage.php?ajaxmake="+ makevalue,true);

The other option, and the one I suggest you is to look into some javascript library, such as jQuery which has functions to easen your work.

If you include jQUery library, adding the select name as id="makeSelection" and id="modelSelection" you could write a javascript function like this:

jQuery(document).ready(function(){
     jQuery("#makeSelection").change(function(){
         jQuery("#modelSelection").load("?ajaxmake="+ makevalue + #modelSelection option");
     });
 });

BTW! Be aware that you may have a huge security problem in your sql queries, since people can attack you through the ajaxmake variable, and truncate/drop your tables or anything. I suggest you to sanitize and validate the data coming from your requests, specially if you post some sensitive data like your database tables on the internet!!! If you want to know more about SQL Injection (how this security issue is called): How can I prevent SQL injection in PHP?