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.
Advertisement
Answer
You cannot use same id for mutliple elements instead use class then you can use .closest() and .find() method to get required input values and then send same to your backend.
Demo Code :
$(document).ready(function() {
$('.btn-primary').click(function(e) {
e.preventDefault();
//get closest tr and then find inputs
var belegnrdel = $(this).closest("tr").find('.belegnrdel').val();
var iddel = $(this).closest("tr").find('.iddel').val();
console.log("belegnrdel -- " + belegnrdel + " || iddel--" + iddel)
//your ajaxcall
});
});<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id='showtabelle'>
<div class='form'>
<h1><b>Transitnummer:</b> $transitnr</h1>
<table>
<thead>
<tr>
<th>Belegnummer:</th>
<th>Gewicht:</th>
<th>Delete:</th>
</tr>
</thead>
<tbody>
<tr>
<td>12
<hr>
</td>
<td>1222
<hr>
</td>
<td>
<form method='post' action='' id='contactform'>
<!--added class-->
<input type='hidden' class='form-control belegnrdel' value='12'>
<input type='hidden' class='form-control iddel' value='1 '>
<button type='submit ' class='btn btn-primary '>Submit</button>
</form>
</td>
</tr>
<tr>
<td>1ss
<hr>
</td>
<td>somethinss
<hr>
</td>
<td>
<form method='post' action='' id='contactform'>
<!--added class-->
<input type='hidden' class='form-control belegnrdel' value='1'>
<input type='hidden' class='form-control iddel' value='2 '>
<button type='submit ' class='btn btn-primary '>Submit</button>
</form>
</td>
</tr>
</tbody>
</table>