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:
JavaScript
x
<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:
JavaScript
<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 :
JavaScript
$(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 });});JavaScript
<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>