1 Attachment(s)
help with drop down option data filtering
I have this code below where it will populate a table based on the drop down list. code is working fine.
only 1 problem
i would like when user open the page index.php All data from meeting_places table will be displayed and
only when the user select an option from the drop down menu the selected data will be displayed
right now it will only display data when there is option selected in the drop down menu
any help will be appreciated. Thank you
Attachment 5476
index.php
PHP Code:
<?php
# Connect
mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());
# Choose a database
mysql_select_db('meeting') or die('Could not select database');
# Perform database query
$query = "SELECT * from meeting_places";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Select - onchange AJAX example</title>
</head>
<body>
<label for="meetingPlace">Meeting place: </label>
<select id="meetingPlace">
<option value="0">Please select</option>
<?php
while ($row = mysql_fetch_assoc($result)) {
echo '<option value="' . $row['id'] . '">' . $row['MeetingPlace'] . '</option>';
}
?>
<a href="index.php">
<input type="submit" value="SHOW ALL">
</a>
</select>
<br /><br />
<table border='1'>
<tr>
<th>ID</th>
<th>Meeting Place</th>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>ZipCode</th>
</tr>
<tr>
<td> <input id="element_5_1" name="element_5_1" class="element text large" type="text"></td>
<td> <input id="element_5_2" name="element_5_2" class="element text large" type="text"></td>
<td> <input id="element_5_3" name="element_5_3" class="element text large" type="text"> </td>
<td> <input id="element_5_4" name="element_5_4" class="element text medium" style="width:14em" type="text"></td>
<td> <input id="element_5_5" name="element_5_5" class="element text medium" style="width:4em" type="text"> </td>
<td> <input id="element_5_6" name="element_5_6" class="element text medium" style="width:6em" type="text"></td>
</tr>
</table>
<br /><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function insertResults(json){
$("#element_5_1").val(json["id"]);
$("#element_5_2").val(json["MeetingPlace"]);
$("#element_5_3").val(json["StreetAddress"]);
$("#element_5_4").val(json["City"]);
$("#element_5_5").val(json["State"]);
$("#element_5_6").val(json["ZipCode"]);
}
function clearForm(){
$("#element_5_1, #element_5_3, #element_5_4, #element_5_5,#element_5_6,#element_5_7").val("");
}
function makeAjaxRequest(placeId){
$.ajax({
type: "POST",
data: { placeId: placeId },
dataType: "json",
url: "process_ajax.php",
success: function(json) {
insertResults(json);
}
});
}
$("#meetingPlace").on("change", function(){
var id = $(this).val();
if (id === "0"){
clearForm();
} else {
makeAjaxRequest(id);
}
});
</script>
</body>
</html>
process_ajax.php
PHP Code:
<?php
mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());
mysql_select_db('meeting') or die('Could not select database');
$placeId = $_POST['placeId'];
$query = "SELECT * from meeting_places";
$result = mysql_query($query) or die('Query failed: ' . mysql_error());
while ($row = mysql_fetch_assoc($result)) {
if ($placeId == $row['id']){
echo json_encode($row);
}
}
?>
