I am making multiple dynamically populated dropdown boxes, each dependent on the box above it, but it also needs to be dependent on each parent field selection above that.
So far I have the code so that it will pull from my database in every box, and each present selection will be populated based on the previous selection, but it is not refining the results for the next box based on the selection of the previous box (it is for the current box, but not the one before that), or any previous box selection.
This is causing subsequent boxes to allow option combinations that are no longer possible given the previously selected options.
The goal at the end of the code is to echo the unique product number(primary key in my table), but the current issue is making it spit out over 100 product numbers, because it is only pulling from the previous select box.
I'm Currently using a AJAX, jQuery, and PHP solution. I feel like the code is close to what it needs to be, but I am missing something that is linking each child field to each and every previous parent field.
I have no problems with my database connection, so I will leave that file out.
All the fields I am pulling from are on the same table in the database. picture of table fields
I will include a get_ file, which there is one of for each select box except the first. They all are the same, just with different values from the database inserted.
I need each child field to be chained to the selections of all previous select boxes so that it only pulls field data for the next option for products that have met the criteria of every previous selection.
<?php
include_once 'dbconfig.php';
?>
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Product Builder Tool</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".product_type").change(function()
{
var id1=$(this).val();
var dataString = 'id1='+ id1;
$(".voltage").find('option').remove();
$(".capacity").find('option').remove();
$(".modes").find('option').remove();
$(".connection").find('option').remove();
$(".status").find('option').remove();
$(".enclosure").find('option').remove();
$(".ul_type").find('option').remove();
$(".options").find('option').remove();
$(".product_number").find('option').remove();
$(".price").find('option').remove();
$(".picture_link").find('option').remove();
$.ajax
({
type: "POST",
url: "get_voltage.php",
data: dataString,
cache: false,
success: function(html)
{
$(".voltage").html(html);
}
});
});
$(".voltage").change(function()
{
var id2=$(this).val();
var dataString = 'id2='+ id2;
$.ajax
({
type: "POST",
url: "get_capacity.php",
data: dataString,
cache: false,
success: function(html)
{
$(".capacity").html(html);
}
});
});
$(".capacity").change(function()
{
var id3=$(this).val();
var dataString = 'id3='+ id3;
$.ajax
({
type: "POST",
url: "get_modes.php",
data: dataString,
cache: false,
success: function(html)
{
$(".modes").html(html);
}
});
});
$(".modes").change(function()
{
var id4=$(this).val();
var dataString = 'id4='+ id4;
$.ajax
({
type: "POST",
url: "get_connection.php",
data: dataString,
cache: false,
success: function(html)
{
$(".connection").html(html);
}
});
});
$(".connection").change(function()
{
var id5=$(this).val();
var dataString = 'id5='+ id5;
$.ajax
({
type: "POST",
url: "get_status.php",
data: dataString,
cache: false,
success: function(html)
{
$(".status").html(html);
}
});
});
$(".status").change(function()
{
var id6=$(this).val();
var dataString = 'id6='+ id6;
$.ajax
({
type: "POST",
url: "get_enclosure.php",
data: dataString,
cache: false,
success: function(html)
{
$(".enclosure").html(html);
}
});
});
$(".enclosure").change(function()
{
var id7=$(this).val();
var dataString = 'id7='+ id7;
$.ajax
({
type: "POST",
url: "get_ul_type.php",
data: dataString,
cache: false,
success: function(html)
{
$(".ul_type").html(html);
}
});
});
$(".ul_type").change(function()
{
var id8=$(this).val();
var dataString = 'id8='+ id8;
$.ajax
({
type: "POST",
url: "get_options.php",
data: dataString,
cache: false,
success: function(html)
{
$(".options").html(html);
}
});
});
$(".options").change(function()
{
var id9=$(this).val();
var dataString = 'id9='+ id9;
$.ajax
({
type: "POST",
url: "get_product_number.php",
data: dataString,
cache: false,
success: function(html)
{
$(".product_number").html(html);
}
});
});
$(".product_number").change(function()
{
var id10=$(this).val();
var dataString = 'id10='+ id10;
$.ajax
({
type: "POST",
url: "get_price.php",
data: dataString,
cache: false,
success: function(html)
{
$(".price").html(html);
}
});
});
$(".price").change(function()
{
var id11=$(this).val();
var dataString = 'id11='+ id11;
$.ajax
({
type: "POST",
url: "picture_link.php",
data: dataString,
cache: false,
success: function(html)
{
$(".picture_link").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:400px;
height:35px;
border:2px solid #456879;
border-radius:10px;
}
.color {
color:blue;
}
.link {
color:red;
}
</style>
</head>
<body>
<h1 align="center" class="color">Product Builder Tool</h1>
<center>
<div>
<label>Product Type:</label>
<select distinct name="product_type" class="product_type">
<option selected="selected">--Select Product Type--</option>
<?php
$stmt = $DB_con->prepare("SELECT DISTINCT product_type FROM surge_unit");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['product_type']; ?>"><?php echo $row['product_type']; ?></option>
<?php
}
?>
</select>
<br><br>
<label>Voltage and Phase:</label> <select distinct name="voltage" class="voltage">
<option selected="selected">--Select Voltage and Phase--</option>
</select>
<br><br>
<label>Capacity:</label> <select distinct name="capacity" class="capacity">
<option selected="selected">--Select Capacity--</option>
</select>
</select>
<br><br>
<label>Modes:</label> <select distinct name="modes" class="modes">
<option selected="selected">--Select Modes Protected--</option>
</select>
</select>
<br><br>
<label>Connection Type:</label> <select distinct name="connection" class="connection">
<option selected="selected">--Select Connection Type--</option>
</select>
</select>
<br><br>
<label>Status Indication:</label> <select distinct name="status" class="status">
<option selected="selected">--Select Status Indication--</option>
</select>
</select>
<br><br>
<label>Enclosure:</label> <select distinct name="enclosure" class="enclosure">
<option selected="selected">--Select Enclosure--</option>
</select>
</select>
<br><br>
<label>UL 1449 Location Type:</label> <select distinct name="ul_type" class="ul_type">
<option selected="selected">--Select UL 1449 Type--</option>
</select>
</select>
<br><br>
<label>Options:</label> <select distinct name="options" class="options">
<option selected="selected">--Select Options--</option>
</select>
<br>
<label>Product Number:</label>
<echo selected="selected" distinct name="product_number" class="product_number">Product Number</echo>
<br><br><br>
</div>
<br />
</center>
</body>
</html>Example of my get files, this is the one from the third select box.
get_capacity.php
<?php
include('dbconfig.php');
if($_POST['id2'])
{
$id3=$_POST['id2'];
$stmt = $DB_con->prepare("SELECT DISTINCT capacity FROM surge_unit WHERE voltage=:id2");
$stmt->execute(array(':id2' => $id3));
?><option selected="selected">Select Capacity</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['capacity']; ?>"><?php echo $row['capacity']; ?></option>
<?php
}
}
?></div>