I created a search function, where each result has 2 dependent select menus, that are populated depending on the search result.
Now when the search results are more than one, the select menus for the first result work just fine. [see link image 1]
The problem comes on the second result. When I select and option from the first select menu of the 2nd result. Instead of putting the data, on the select menu next to it, the data is placed in the second select menu of the first result.[see link image 2]
I cant seem to solve this problem. I have searched the forums here and all around the web. Can't seem to find the solution. Can someone please help. i hope i have explained the problem well enough.
My code:
Index.php
<!DOCTYPE html>
<?php
include("search.php");
?>
<html>
<head>
<title>Search and Drop</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
</head>
<body>
<form action="index.php" method="POST">
<input type="search" name="search" autocomplete="off" />
</form>
<?php product(); ?>
</body>
<script type="text/javascript" src="ajax.js"></script>
</html>
search.php
<!DOCTYPE html>
<?php
include("dbcon.php");
?>
<html>
<?php
function product() {
include("dbcon.php");
if (isset($_POST['search']))
{
$str = $_POST['search'];
$keywords = preg_replace("#[^0-9a-z]#i","", $str);
$query = "SELECT * FROM product WHERE product LIKE '%$keywords%'";
$result = mysqli_query($conn,$query);
$count = mysqli_num_rows($result);
if ($count > 0)
{
while($row = mysqli_fetch_array($result))
{
echo '<option value="$row["pro_id"]">'.$row["product"].'</option>';
containers($row['pro_id']);
}
}else
echo "Nothing";
}
}
function containers($parent_id) {
?>
<select id="containers" onchange="getSizes(this.value)">
<option value="0">Choose</option>
<?php
include ('dbcon.php');
$select = mysqli_query($conn, "SELECT * FROM product, container
WHERE ($parent_id = product.pro_id) AND ($parent_id = container.pro_id)");
?>
<?php
while ($row = mysqli_fetch_assoc($select)) {
?>
<option value="<?php echo $row["con_id"]; ?>"><?php echo $row["container"]; ?></option>
<?php
}
?>
</select>
<select id="sizes" onchange="getQuan(this.value);"></select>
<?php
}
?>
</html>
get_sizes.php
<!DOCTYPE html>
<html>
<?php
include("dbcon.php");
$query = "SELECT * FROM sizes WHERE con_id='".$_POST["con_id"]."'";
$result = $conn->query($query);
?>
<option value="0">Choose</option>
<?php
while ($rs=$result->fetch_assoc()) {
?>
<option value="<?php echo $rs["size_id"]; ?>"><?php echo $rs["sizes"]; ?></option>
<?php
}
?>
</html>
ajax.js
//function to show and hide sizes select menu
$(document).ready(function(){
$('#containers').change(function() {
var value = $(this).val();
if (value == 0) {
$('#sizes').hide();
$('#quantity').hide();
}else {
$('#sizes').show();
}
});
});
//function to pull data from database onto sizes select menu
function getSizes(val) {
$.ajax({
type:"POST",
url:"get_sizes.php",
data:'con_id='+val,
success: function(data){
$("#sizes").html(data);
$("#quantity").html('<option>Choose<option>');
}
});
}
