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

以及更新的 php 文件（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);

我的理解：

使用“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

首先，让我们从你的 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,
        });
    });
});

这样每次勾选或取消勾选，都会相应更新数据库

Answer 2

您可以使用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>