I am quite new to the whole javascript and PHP. I have two issues with my code that i cannot seem to fix.
When i choose a category, it should show a table with the corresponding category. But it is including the dropdown as a duplicate, also there is an error that i can't see why is returned as an "Undefined variable: output in /var/www/html/phpDD.php on line 37" which is: "$output .= "tbody".
i hope you can help me to continue develop! :)
phpDD.php
<?php
// include database connection file
include_once "testSide.php";
if(isset($_POST['InvestmentName']))
{
$uid = $_POST['InvestmentName'];
}
$qu = "select Prod.name, one.yield as yield_one, five.yield as yield_two, ten.yield as yield_three, twenty.yield as yield_four, one.stdev as st_one, five.stdev as st_two, ten.stdev as st_three, twenty.stdev as st_four, one.top1dd as top_one, five.top1dd as top_two, ten.top1dd as top_three, twenty.top1dd as top_four Select *
from products
where category_id = $uid) as Prod
left join;";
$result = $conn->query($qu);
if (!$result) {
trigger_error('Invalid query:' . $conn->error);
}
if ($result->rowCount() > 0) {
$output .= "<table class='table table-hover table-border'>
<thead>
<tr>
<th>Name</th>
<th>Afkast sidste år</th>
<th>Genst sidste 5 år</th>
<th>Genst stidste 10 år</th>
<th>Genst sidste 20 år</th>
<th>SR sidste år</th>
<th>SR 5 år</th>
<th>SR 10 år</th>
<th>SR 20 år</th>
<th>DD sidste år</th>
<th>DD 5 år</th>
<th>DD 10 år</th>
<th>DD 20 år</th>
</tr>
</thead>";
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
$output .= "<tbody>
<tr>
<td>{$row["name"]}</td>
<td>{$row["yield_one"]}</td>
<td>{$row["yield_two"]}</td>
<td>{$row["yield_three"]}</td>
<td>{$row["yield_four"]}</td>
<td>{$row["st_one"]}</td>
<td>{$row["st_two"]}</td>
<td>{$row["st_three"]}</td>
<td>{$row["st_four"]}</td>
<td>{$row["top_one"]}</td>
<td>{$row["top_two"]}</td>
<td>{$row["top_three"]}</td>
<td>{$row["top_four"]}</td>
</tr>";
}
"</tbody>";
$output .= "</tbody></table>";
echo $output;
}else{
echo "No records found";
}
?>
Index.php
<!Doctype html>
<html lang="en">
<head>
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<h2 class="text-center">Væg en kategori </h2>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4" style="margin-top:20px; margin-bottom:20px;">
<form id="submitForm">
<div class="form-group">
<select class="form-control Investment" name="Investment" id="Investment">
<option value="">Vælg Kategori</option>
<?php foreach($users as $user): ?>
<option value="<?= $user['id']; ?>"><?= $user['name']; ?></option>
<?php endforeach; ?>
</select>
</div>
</form>
</div>
</div>
<div class="col-md-12">
<div id="show-invest">
</div>
</div>
</div>
</body>
</html>
<!---jQuery ajax load rcords using select box --->
<script type="text/javascript">
$(document).ready(function(){
$(".Investment").on("change", function(){
var InvestmentName = $(this).val();
if (InvestmentName !== "") {
$.ajax({
url : "phpDD.php",
type:"POST",
cache:false,
data:{InvestmentName:InvestmentName},
success:function(data){
$("#show-invest").html(data);
}
});
}else{
$("#show-invest").html(" ");
}
})
});
</script>