How to show ajax data into while loop? - php

Question

I have fetched some car brand names in a while loop and then for each brand name I make a select menu for the car names in another while loop by using the "brand id" as foreign key. And then I want to show the car names in a box each time someone changes the dropdown select options. Here's my code below :
$query = "SELECT * FROM brands";
$result = $db->query($query);
// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
$brand_id = $row->id;
?>
<div id="result"></div> <!-- The Ajax result will be shown here -->
<div><?php echo $row->brand_name ?></div>
<?php
$query2 = "SELECT * FROM cars WHERE brand_id = ?";
$result2 = $db->prepare($query);
$result2->execute(array($brand_id));
<select name="car" id="car">
// Inner while loop
while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
?>
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
<?php
} // Closing Inner while loop
?>
</select>
<!-- Ajax -->
<script>
$(document).ready(function(){
$('#car').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
<?php
} // Closing outer while loop
In the ajax.php I have written the following code to echo the car name
$carName = $_POST['car'];
echo $carName;
But the issue is - it is just executed for the first option selected inside first inner loop of the first outer loop. I mean the ajax code only runs for the first iteration of the both loops.
I also tried to make the select menu and the result div unique by adding the "brand id" as follow :
<div id="result<?php echo $brand_id ?>"></div>
and
<select name="car" id="car<?php echo $brand_id ?>">
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
</select>
and also the ajax as following :
$('#car<?php echo $brand_id ?>').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result<?php echo $brand_id ?>').html(data);
}
});
But it didn't work. Please suggest your best possible solutions. Thank you.

Answer 1

Try my code
$query = "SELECT * FROM brands";
$result = $db->query($query);
// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
$brand_id = $row->id;
?>
<div id="result<?php echo $brand_id;?>"></div> <!-- The Ajax result will be shown here -->
<div><?php echo $row->brand_name ?></div>
<?php
$query2 = "SELECT * FROM cars WHERE brand_id = ?";
$result2 = $db->prepare($query);
$result2->execute(array($brand_id));
// Inner while loop
while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
?>
<select name="car[]" id="car<?php echo $row2->id ?>">
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
</select>
<!-- Ajax -->
<script>
$(document).ready(function(){
$('#car<?php echo $row2->id ?>').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
console.log(data);
$('#result<?php echo $brand_id;?>').html(data);
}
});
});
});
</script>
<?php
}
}

Answer 2

The select and ajax code should be out of while loop. just check the code below
<?php $query = "SELECT * FROM brands";
$result = $db->query($query);
// Outer while loop
while($row = $result->fetch(PDO::FETCH_OBJ)){
$brand_id = $row->id;
?>
<div id="result"></div> <!-- The Ajax result will be shown here -->
<div><?php echo $row->brand_name ?></div>
<?php
$query2 = "SELECT * FROM cars WHERE brand_id = ?";
$result2 = $db->prepare($query);
$result2->execute(array($brand_id)); ?>
<select name="car" id="car">
<?
// Inner while loop
while($row2 = $result2->fetch(PDO::FETCH_OBJ)){
?>
<option value="<?php echo $row2->id ?>"><?php echo $row2->car_name ?></option>
<?php
} // Closing Inner while loop
?>
</select>
<!-- Ajax -->
<script>
$(document).ready(function(){
$('#car').change(function(e){
e.preventDefault();
var car = $(this).val();
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
<?php
} // Closing outer while loop
?>
``

Answer 3

You need not call ajax() in a while loop.
Simply you can call .change() on
<select name="car" onchange="getCar(this.value)">
<script type="text/javascript">
function getCar(car) {
$.ajax({
url: "ajax.php",
type: "post",
data: {car: car},
success: function(data){
$('#result').html('');
$('#result').html(data);
}
});
}
</script>
<div id="result"></div>