Using Select Box to Update Display Query - php

Question

I am just learning Ajax and am trying to update a mysql select query to filter results. I think the query is working fine, but not sure that I have the event working correctly.
Here is my HTML with the selection;
<div class="volunteers">
<h1>Volunteers</h1>
<div class="volunteerSelection">
<select id="vtSelect" name="volunteerS">
<option value="1">Comittee</option>
<option value="2">Day of Event</option>
</select>
</div>
<div id="volunteers">
</div>
</div>
This is the script that displays the data;
I have updated this to the suggestion and it works fine. Then I started working on my PHP and mysql query. See below;
$(document).ready(function(){
$('#vtSelect').change(function (e) {
e.preventDefault();
var selectedOption = $(this).find('option:selected');
$('#vtSelect option').removeAttr('selected');
$(selectedOption).attr('selected', 'selected');
var selectedOptionValue = $(selectedOption).val();
$.ajax({
type: "POST",
url: "includes/backDataProcess.php",
data: {
data: selectedOptionValue
},
success: function (data) {
$("#volunteers").html(data);
}
});
});
});
This is the PHP with the select query; I have update this and am getting data. I updated the name in the select tag, but I am not getting the select tag value in the query. When I comment out the post data and just fill in a value it posts fine. I am not getting any errors, it is just displaying 0 results.
<?php
include('readerConnect.php');
$sql = "SELECT * FROM contacts prc
JOIN states as st
ON (prc.stateId = st.idStates)
INNER JOIN volunteers as v
ON (prc.idContacts = v.contactId)
INNER JOIN volunteerType as vt
ON (v.volunteerTypeId = vt.idVolunteerType)
WHERE (volunteerTypeId = 1 /*`mysql_real_escape_string('$_POST[volunteerS]')`*/)";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo
"<div class='contacts'>
<div class='contactName'>" . $row["firstName"] ." " . $row["lastName"] ."</div>"
."<div class='contactAddress'>" .$row["address1"] ." " .$row["address2"] ."<br>"
.$row["city"] ." " .$row["state"] ." " .$row["zip"] ."</div>"
."<div class='contactVolunteer'>" .$row["volunteerTypeId"]
."</div>";
}
} else {
echo "0 results";
}
$conn->close();
?>
I am not sure exactly where the issue is, I have tried both change and onchange to update, do I need an update button? I thought jquery would be able to do this with no update. Any help is greatly appreciated.

Answer 1

There are several obvious problems in your jQuery code. If you open your browser console you should see error onChange is not a function since there is no such jQuery method. You want change() or on()
Also you create a function showVolunteers() but it never gets called.
try:
$('#vtSelect').change(function (e) {
e.preventDefault();
var selectedOption = $(this).find('option:selected');
$('#vtSelect option').removeAttr('selected');
$(selectedOption).attr('selected', 'selected');
var selectedOptionValue = $(selectedOption).val();
$.ajax({
type: "POST",
url: "includes/backDataProcess.php",
data: {
data: selectedOptionValue
},
success: function (data) {
$("#volunteers").html(data);
}
});
});
Should you encounter more problems, use browser console network tab to inspect ajax request, and always use console to check for errors