使用 JS/AJAX 提交复选框而不刷新

Question

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>

Answer 1

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>

Answer 2

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