I have two dropdown boxes for a search that uses custom fields and I need the second dropbown box to be populated depending on the results of the first box. So far I have:
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" name="s" id="s" value=""/>
<select id="stocktype" name="StockType">
<?php
//$make = $_GET['Make'];
$metakey = 'StockType';
$stocktypes = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
if ($stocktypes) {
foreach ($stocktypes as $stocktype) {
echo "<option value="" . $stocktype . "">" . $stocktype . "</option>";
}
}
?>
</select>
<select id="make" name="Make">
<?php
//$make = $_GET['Make'];
$metakey = 'Make';
$makes = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
if ($makes) {
foreach ($makes as $make) {
echo "<option value="" . $make . "">" . $make . "</option>";
}
}
?>
</select>
<select id="model" name="Model" onChange="handleSelection(value)">
<?php
//$make = $_GET['Make'];
$metakey = 'Model';
$models = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
if ($models) {
foreach ($models as $model) {
echo "<option value="" . $model . "">" . $model . "</option>";
}
}
?>
</select>
<input type="hidden" name="post_type" value="vehicle" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
I that works fine but right now the “Model” dropdown box is being populated with every model. I need it to only be populated with the models on the selection of the first dropdown box. For example, if the user selects “Toyota” than only the Toyota models will be shown in the second dropdown.
I know I need to use ajax for this but I don’t know how to set up the file that will be requested by ajax so that it contains logic. As far as js goes, I can do something like this:
<script>
jQuery(document).ready(function(){
$("#make").change(function() {
if ($(this).val() == 'TOYOTA') {
$.ajax({
url: "<?php bloginfo('template_url'); ?>/getModel.php",
success: function(msg){
$("#results").html(msg);
}
});
}
});
});
</script>
How would I format the getModel.php file with specific database queries?