So I'm new to Ajax, this is my first attempt at using it, hoping that someone can help me find my mistake. The goal is that I have a list of vehicle styles and in the database, I have Makes associated with specific styles. So when a radio button with a style is selected, it should populate a dropdown list with the Makes associated.
I got it working well on Chrome, but having issues with other browser such as IE and Safari.
Screen shot of it working on Chrome here: Link
Screen shot of it not working on Safari here: Link
The form name is: autoForm And the radio fields have an onclick event to call getMakes().
This is my function:
function getMakes() {
$.post('getMake.php', {
vehicleStyle: autoForm.style.value
},
function(output) {
$('#vehicle-makes').hide();
$('#vehicle-makes').html(output).slideDown("slow");
});
}
Here is the PHP from getMake.php
PDO/database stuff up here^^ Leaving it out of the example
$list = '<label for="vehicle_make">Makes</label>
<select name="vehicle_make"
class="form-control"
onchange="getModels()">
<option value="">Select One</option>';
foreach ($results as $result) {
$list .= '<option value="'.$result->make.'">'.$result->make.'</option>';
}
$list .= '</select>';
echo $list;
So as you can see, it is communicating with the getMakes.php because it's bringing over the empty dropdown list - but it looks like it's not sending the data over to the PHP to pull associated data from the DB.
All help is appreciated, thank you!
So what I figured out is that this doesn't work in IE and Safari:
vehicleStyle: autoForm.style.value
I had to get the value of the input differently, and it worked.