使用 JS/AJAX 提交復選框而不刷新

Question

我的表中有 2 個復選框（每行）。 我想通過按下復選框而不是使用提交按鈕來提交和更新一行，它可以工作，但我希望它在不刷新整個頁面的情況下提交。 我正在使用 JS 和 AJAX ，但這一次，我做錯了。

第一個復選框：

      <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>

它的腳本：

    <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>

以及用於更新 (addlist.php) 的 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);

我的理解：

使用“var wegeb = document.getElementById("wegeb").value”，我正在選擇復選框值（其中包含表中的鍵“bestellnr”），我將其作為 wegeb 傳遞給 addlist.php，它在變量 $bestellnr 中的位置。 現在，來自 Key 的行正在更新。 此外，即使使用 event.preventDefault()，頁面仍在重新加載。 很明顯出了點問題，但我不知道在哪里並嘗試了不同的方法。 我希望我把我的問題說清楚了，感謝任何幫助或提示！

更新（表）：

            <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

您可以使用e.preventDefault(); ，這不是一個好主意。

這可能會幫助你： -

<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

首先，讓我們從 html 中刪除內聯 js：

<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>

然后我們將 ajax 調用綁定到正確的事件：

$(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,
        });
    });
});

這樣每次您選中或取消選中復選框時，它都會相應地更新數據庫