i have 2 Checkboxes (in each row) in my Table. I want to submit and update a row by pressing the checkbox and not with a submit button, it works, but i want it to submit without refreshing the whole page. I am using JS and AJAX for it, but this time, i'm making something wrong.
The first Checkbox:
<td>
<form id="checkgo" method="post">
<input type="checkbox" onchange="this.form.submit()" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?> </td>
The Script for it:
<script>
$(document).ready(function() {
$("#checkgo").submit(function (event){
event.preventDefault()
var wegeb = document.getElementById("wegeb").value
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
return false;
});
});
</script>
And the php file for the Update (addlist.php):
$we_gebucht = (isset($_POST['we_gebucht']) && !empty($_POST['we_gebucht'])) ? $_POST['we_gebucht'] : null;
$we_gebucht='yes';
$bestellnr = (isset($_POST['wegeb']) && !empty($_POST['wegeb'])) ? $_POST['wegeb'] : null;
$update=mysqli_query($connection,"UPDATE bestellung SET we_gebucht='$we_gebucht' WHERE bestellnr='$bestellnr'");
$result = $connection->query($update);
My understanding:
With "var wegeb = document.getElementById("wegeb").value" i'm selecting the Checkboxes Value (which contains the Key "bestellnr" from the table), that one i'm passing as wegeb to the addlist.php, where it gets in the Variable $bestellnr. Now, the row from the Key is getting updated. Moreover, the page is still reloading, even with the event.preventDefault(). it's clear something is wrong, but i dont see where and tried different ways. i hope i made my problem clear, Thanks for any Help or tip!
Update(Table):
<tr>
<td> <?php echo $row['warennr']; ?> </td>
<td> <?php echo $row['kundeprojekt_id']; ?> </td>
<td> <?php echo $row['bestellnr']; ?> </td>
<td> <?php echo $row['besteller']; ?> </td>
<td> <?php echo $row['datum']; ?> </td>
<td> <?php echo $row['gesamtwert']; ?> </td>
<td> <?php echo $row['po_nr']; ?> </td>
<td> <?php echo $row['ebest_ekw']; ?> </td>
<td>
<form id="checkgo" method="post">
<input type="checkbox" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?> </td>
<td> <?php echo $row['PSP_Element']; ?> </td>
<td>
<form id='liefert' method="post" >
<input type="checkbox" onclick="doThis(this)" name="lief" id="lief" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['geliefert']; ?> </td>
<td> <?php echo $row['smarttrack']; ?> </td>
<td> <?php echo $row['name']; ?> </td>
<td> <?php echo $row['preis']; ?> </td>
<td> <?php echo $row['menge']; ?> </td>
<td> <?php echo $row['assetnr']; ?> </td>
<td> <?php echo $row['ticketnr']; ?> </td>
<td> <?php echo $row['Anlagennr']; ?> </td>
<td> <?php echo $row['lieferantname']; ?> </td>
<td> <?php echo $row['kostenstelle']; ?> </td>
<td> <?php echo $row['kundenname_projekt']; ?> </td>
<td> <?php echo $row['standort']; ?> </td>
<td> <?php echo $row['info_uebergabe']; ?> </td>
<td> <?php echo $row['warengruppe']; ?> </td>
<td> <button class="btn-update"> <a href="updateliste.php? bestellnr=<?php print $row['bestellnr']; ?>&besteller=<?php print $row['besteller']; ?>&datum=<?php print $row['datum']; ?>&gesamtwert=<?php print $row['gesamtwert']; ?>&gruppenid=<?php print $row['gruppenid']; ?>&warengruppe=<?php print $row['warengruppe']; ?>&po_nr=<?php print $row['po_nr']; ?>&ebest_ekw=<?php print $row['ebest_ekw']; ?>&we_gebucht=<?php print $row['we_gebucht']; ?>&geliefert=<?php print $row['geliefert']; ?>&smarttrack=<?php print $row['smarttrack']; ?>&name=<?php print $row['name']; ?>&preis=<?php print $row['preis']; ?>&menge=<?php print $row['menge']; ?>&assetnr=<?php print $row['assetnr']; ?>&ticketnr=<?php print $row['ticketnr']; ?>&Anlagennr=<?php print $row['Anlagennr']; ?>&lieferantname=<?php print $row['lieferantname']; ?>&kundenname_projekt=<?php print $row['kundenname_projekt']; ?>&standort=<?php print $row['standort']; ?>&info_uebergabe=<?php print $row['info_uebergabe']; ?>&warennr=<?php print $row['warennr']; ?>&warennr=<?php print $row['warennr']; ?>&kundeprojekt_id=<?php print $row['kundeprojekt_id']; ?>&kstnr=<?php print $row['kstnr']; ?>&kostenstelle=<?php print $row['kostenstelle']; ?>&lieferantID=<?php print $row['lieferantID']; ?>&InvestPSPID=<?php print $row['InvestPSPID']; ?>" class="btn-update">✎</a> </button> </td>
<td> <button class="btn-deletee" type="button" id="<?php echo $row['bestellnr']; ?>" data-id2="<?php echo $row['warennr']; ?>" data-id3="<?php echo $row['kundeprojekt_id']; ?>" >Delete</a></button></td>
</tr>
You can prevent the form from submitting with e.preventDefault();
, this is not good idea.
this may help you:-
<form id="checkgo" method="post">
<input type="checkbox" onchange="doThis(this)" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<script>
function doThis(checkbox){
var wegeb = document.getElementById("wegeb").value
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
return false;
}
</script>
First, let's remove the inline js from your html:
<td>
<form id="checkgo" method="post">
<input type="checkbox" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?>
</td>
Then we bind the ajax call to the right event:
$(function() {
$("#wegeb").change(function (e){
e.preventDefault(); //not necessary since we are binding to the checkbox
var wegeb = $(this).val();
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
});
});
This way every time you check the checkbox or uncheck it, it will update the database accordingly
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.