The goal of this project is for the user to select "Color" and the second dropdown will only show the members in that color group. I've posted my SQL table along with my php page and my url page.
The problem I have is that I can't get my member dropdown to work. It's not picking up any of the members.
SQL:
+--------+
| Color |
+--------+
| Red |
| Blue |
| Orange |
| Black |
+--------+
+--------+--------------+
| Color | MemberName |
+--------+--------------+
| Red | Joe Bob |
| Red | Catherine |
| Blue | Tommy |
| Orange | John Razks |
| Black | Trevor Smith |
+--------+--------------+My PHP code:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="jquery.js"></script>
</head>
<body>
<?php
function load_Color(){
$conn=mysqli_connect("#connection");
if(!$conn){ die("Connection Failed".myslqi_connect_error()); }
else{
$output='';
$sql = "SELECT * from Color order by Color ASC";
$result = mysqli_query($conn, $sql);
while($row=mysqli_fetch_array($result)){
$output .= '<option value="'.$row["Color"].'">'.$row["Color"].'</option>';
}
return $output;
}
}
?>
<div class="formatbody" id="formatbody">
<div class="category_div" id="category_div">Color:
<select id="color" name="color">
<option value="">Select Color</option>
<?php echo load_Color(); ?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Individual:
<select name="individual" id="individual">
<option value="">Select Individual</option>
</select>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#color').change(function(){
var Color = $(this).val();
$.ajax({
url: "fetch.php",
method: "POST",
data:{color: Color},
dataType: "text",
success: function(data)
{
$('#individual').html(data);
}
});
});
});
</script>Fetch.PHP
<html>
<body>
<?php
$conn=mysqli_connect("#connection");
if(!$conn){ die("Connection Failed".mysqli_connect_error()); }
else{
$output='';
$sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC";
$result = mysqli_query($conn, $sql);
$output = '<option value="">Select the Individual</option>';
while ($row=mysqli_fetch_array($result))
{
$output .='<option value="'.$row["MemberName"].'">'.$row["MemberName"].'</option>';
}
}
echo $output;
?>
</body>
</html></div>
Well you have to json encode your data and send back to ajax success function.
here are the modifications you'll have to make
in your php code and jquery ajax call
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="jquery.js"></script>
</head>
<body>
<?php
function load_Color(){
$conn=mysqli_connect("#connection");
if(!$conn){ die("Connection Failed".myslqi_connect_error()); }
else{
$output='';
$sql = "SELECT * from Color order by Color ASC";
$result = mysqli_query($conn, $sql);
while($row=mysqli_fetch_array($result)){
$output .= '<option value="'.$row["Color"].'">'.$row["Color"].'</option>';
}
return $output;
}
}
?>
<div class="formatbody" id="formatbody">
<div class="category_div" id="category_div">Color:
<select id="color" name="color">
<option value="">Select Color</option>
<?php echo load_Color(); ?>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Individual:
<select name="individual" id="individual">
<option value="">Select Individual</option>
</select>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#color').change(function(){
var Color = $(this).val();
$.ajax({
url: "fetch.php",
method: "POST",
data:{color: Color},
dataType: "text",
success: function(data)
{
$('#individual').html(data.select_option);
}
});
});
});
</script>
And in fetch.php
<?php
$conn=mysqli_connect("#connection");
if(!$conn){ die("Connection Failed".mysqli_connect_error()); }
else{
$output=array();
$sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC";
$result = mysqli_query($conn, $sql);
$output["select_data"] = '<option value="">Select the Individual</option>';
while ($row=mysqli_fetch_array($result))
{
$output["select_data"] .='<option value="'.$row["MemberName"].'">'.$row["MemberName"].'</option>';
}
}
echo json_encode($output);
?>