I have a PHP file which shows the entries of a specific id within a SQL table. Now i want to be able to delete entries and show the updated table without a page reload.
Iam trying my best with a solution via AJAX, but no matter which entry i choose to delete, everytime only the one at the top gets deleted.
I hope someone has clue why this happens.
Here is my show.php:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.btn-primary').click(function (e) {
e.preventDefault();
var belegnrdel = $('#belegnrdel').val();
var iddel = $('#iddel').val();
$.ajax
({
type: "POST",
url: "del.php",
data: { "iddel": iddel, "belegnrdel": belegnrdel},
success: function (data) {
$('#showtabelle').html(data);
}
});
});
});
</script>
</html>
<?php
// Includes
require_once '../../admin/config/database.php';
require_once '../../admin/config/dbconfig.php';
require_once './config.php';
echo "<div id='showtabelle'>";
$select = $db->query(" SELECT
belegnr,
gewicht,
id FROM
tabelle2
WHERE id='$transitnr'
ORDER BY belegnr DESC");
$nachrichten = $select->fetchAll(PDO::FETCH_OBJ);
$summe = mysqli_query($dbi, " SELECT
SUM(gewicht) AS gewicht_summe
FROM tabelle2
WHERE id='$transitnr'");
$summeausgabe = mysqli_fetch_assoc($summe);
$sum = $summeausgabe['gewicht_summe'];
echo " <div class='form'>
<h1><b>Transitnummer:</b> $transitnr</h1>";
echo " <table>
<thead>
<tr>
<th>Belegnummer:</th>
<th>Gewicht:</th>
<th>Delete:</th>
</tr>
</thead>
<tbody>";
foreach($nachrichten as $nachricht) {
echo " <tr>
<td>$nachricht->belegnr<hr></td>
<td>$nachricht->gewicht kg<hr></td>
<td>
<form method='post' action='' id='contactform'>
<input type='hidden' class='form-control' id='belegnrdel' value='" . $nachricht->belegnr . "'>
<input type='hidden' class='form-control' id='iddel'' value='" . $transitnr . "'>
<button type='submit' class='btn btn-primary'>Submit</button>
</form> </td>";
}
echo " </tr>
</tbody>
</table>";
echo " <br><br>
<b><u><align='left'>Gesamtgewicht: $sum kg </u></b>";
echo "</div></div>";
?>
This is my del.php:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.btn-primary2').click(function (e) {
e.preventDefault();
var belegnrdel = $('#belegnrdel').val();
var iddel = $('#iddel').val();
$.ajax
({
type: "POST",
url: "del.php",
data: { "iddel": iddel, "belegnrdel": belegnrdel},
success: function (data) {
$('#showtabelle').html(data);
}
});
});
});
</script>
</html>
<?php
// Includes
require_once '../../admin/config/database.php';
require_once '../../admin/config/dbconfig.php';
require_once './config.php';
if(isset($_POST["iddel"]))
{
$transitnr = $_POST['iddel'];
$belegnummerdel = $_POST['belegnrdel'];
echo $belegnummerdel;
$query = " DELETE
FROM tabelle2
WHERE id='".$transitnr."' AND belegnr='".$belegnummerdel."'";
$result = mysqli_query($dbi, $query) or die ( mysqli_error($dbi));
}
$output = '';
$select = $db->query(" SELECT
belegnr,
gewicht,
id
FROM tabelle2
WHERE id='$transitnr'
ORDER BY belegnr DESC");
$nachrichten = $select->fetchAll(PDO::FETCH_OBJ);
$summe = mysqli_query($dbi, " SELECT
SUM(gewicht) AS gewicht_summe
FROM tabelle2
WHERE id='$transitnr'");
$summeausgabe = mysqli_fetch_assoc($summe);
$sum = $summeausgabe['gewicht_summe'];
$output .= "
<div class='form'>
<h1><b>Transitnummer:</b> $transitnr</h1>
<table>
<thead>
<tr>
<th>Belegnummer:</th>
<th>Gewicht:</th>
<th>Delete:</th>
</tr>
</thead>
<tbody>";
foreach($nachrichten as $nachricht) {
$output .= " <tr>
<td>$nachricht->belegnr<hr></td>
<td>$nachricht->gewicht kg<hr></td>
<td><form method='post' action='' id='contactform'>
<input type='text' class='form-control' id='belegnrdel' value='" . $nachricht->belegnr . "'>
<input type='text' class='form-control' id='iddel'' value='" . $transitnr . "'>
<button type='submit' class='btn btn-primary2'>Submit</button>
</form> </td>";
}
$output .= " </tr>
</tbody>
</table>";
$output .= " <br><br>
<b><u><align='left'>Gesamtgewicht: $sum kg </u></b>";
echo $output;
?>
The show.php is included in a another file, where it gets the variables like $transitnr.
id='belegnrdel'...gets output multiple times into your page, for example. But in HTML, IDs must be unique (otherwise it wouldn't be an ID, by definition!). So$('#belegnrdel').val()assumes that there can only be onebelegnrdelin the page, and returns the first one it finds. All others are considered invalid. Instead, you need to find the one nearest to the button which was clicked. Either that, or just put the ID as a data-attribute of the button (much simpler) and retrieve it from there.