堆棧內存溢出
  簡體   English   中英

如何根據復選框更新數據庫值？ jQuery的/ PHP的/阿賈克斯

[英]How to update database value based on checkbox? Jquery/php/ajax

 原文  2018-03-25 05:34:57  6   2    php/ jquery/ mysql/ ajax/ checkbox

問題描述

嘗試了幾個小時試圖解決這個問題，但是卻一無所獲。

我正在使用標簽作為復選框。 在選中一個復選框時，我希望將數據庫的值更新為1。如果用戶取消選中該復選框，我希望將數據庫中的值更新為0。

這是頁面： 

 <!DOCTYPE html> <html> <head> <title>Territory</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <?php require_once 'config.php'; $sql = "SELECT id, address, suburb, lat, lng, date, time FROM addresses"; $result = $conn->query($sql); echo '<table style="margin:0 auto; max-width:320px;"> <tr> </tr>'; if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo '<tr> <td><span style="font-weight:bold;">'.$row["address"].' '. $row["suburb"].'</span> <button style="float:right;" type="button">Go</button><br><br> <div class="row"> <input type="checkbox" name="id" id="home['. $row["id"].']" value="1"/> <label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"></label> <span id="dropdown"> <select class="dropdown1" name="nhd1" id="'. $row["id"].'" > <option></option> <option>Mon</option> <option>Tue</option> <option>Wed</option> <option>Thu</option> <option>Fri</option> <option>Sat</option> <option>Sun</option> </select> <select class="dropdown2" name="nht1" id="'. $row["id"].'" > <option></option> <option>8:00am</option> <option>8:30am</option> <option>9:00am</option> <option>9:30am</option> <option>10:00am</option> <option>10:30am</option> <option>11:00am</option> <option>11:30am</option> <option>12:00pm</option> <option>12:30pm</option> <option>1:00pm</option> <option>1:30pm</option> <option>2:00pm</option> <option>2:30pm</option> <option>3:00pm</option> <option>3:30pm</option> <option>4:00pm</option> <option>4:30pm</option> <option>5:00pm</option> <option>5:30pm</option> <option>6:00pm</option> <option>6:30pm</option> <option>7:00pm</option> <option>7:30pm</option> </select> <select class="dropdown1" name="nhd2" id="'. $row["id"].'" > <option></option> <option>Mon</option> <option>Tue</option> <option>Wed</option> <option>Thu</option> <option>Fri</option> <option>Sat</option> <option>Sun</option> </select> <select class="dropdown2" name="nht2" id="'. $row["id"].'" > <option></option> <option>8:00am</option> <option>8:30am</option> <option>9:00am</option> <option>9:30am</option> <option>10:00am</option> <option>10:30am</option> <option>11:00am</option> <option>11:30am</option> <option>12:00pm</option> <option>12:30pm</option> <option>1:00pm</option> <option>1:30pm</option> <option>2:00pm</option> <option>2:30pm</option> <option>3:00pm</option> <option>3:30pm</option> <option>4:00pm</option> <option>4:30pm</option> <option>5:00pm</option> <option>5:30pm</option> <option>6:00pm</option> <option>6:30pm</option> <option>7:00pm</option> <option>7:30pm</option> </select> </span> </div> <input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note"> <br><br> </td> <td> </td> </tr>'; echo '</div>'; } } else { echo "0 results"; } echo '</table>'; $conn->close(); ?> <script> $(document).ready(function(){ $('input[type="checkbox"]').click(function(){ var home = 0; if ($('input[type="checkbox"]').is(":checked")) { var home = 1; } var id = $(this).val(); $.ajax({ url:"updateaddress.php", method:"POST", data:{home:home,id:id,}, success: function(data){ alert(data); }, }); }); }); $(document).ready(function(){ $('select[name=nhd1]').change(function(){ var nhd1 = $(this).val(); var id = $(this).attr('id'); $.ajax({ url:"updateaddress.php", method:"POST", data:{nhd1:nhd1,id:id,}, }); }); }); $(document).ready(function(){ $('select[name=nhd2]').change(function(){ var nhd2 = $(this).val(); var id = $(this).attr('id'); $.ajax({ url:"updateaddress.php", method:"POST", data:{nhd2:nhd2,id:id,}, }); }); }); //learn to refresh page just in case more than one group working on map </script> 

      echo '<tr>

      <td><span style="font-weight:bold;">'.$row["address"].' '. $row["suburb"].'</span> <button style="float:right;" type="button">Go</button><br><br>


    <div class="row">
        <input type="checkbox" name="home['. $row["id"].']" id="home['. $row["id"].']" value="1"/>
        <label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"></label>

    </div>
        <input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note">
        <br><br>
      </td>
      <td>

      </td>


    </tr>';
echo '</div>';


<script>

$(document).ready(function(){
   $('input[type="checkbox"]').click(function(){

       if ($('input[type="checkbox"]').is(":checked")) {
           var home = 1;
           var id = $(this).attr('id');
        $.ajax({
             url:"updateaddress.php",
             method:"POST",
             data:{home:home,id:id,},
       }

        });
   });
});

</script>

這是查詢： 

<?php
// Include config file
require_once 'config.php';

$id = mysqli_real_escape_string($conn, $_POST['id']);
$home = mysqli_real_escape_string($conn, $_POST['home']);
$nhd1 = mysqli_real_escape_string($conn, $_POST['nhd1']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht1']);
$nhd2 = mysqli_real_escape_string($conn, $_POST['nhd2']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht2']);

if(isset($_POST["home"])) {
  $sql = "UPDATE addresses SET home='$home' WHERE id=$id";
  if($conn->query($sql) === TRUE){

    } else {
      echo "error" . $sql . "<br>".$conn->error;
    }
  }

2 個解決方案

解決方案1
 0  2018-03-25 05:44:28

創建另一個具有相同名稱和值0的輸入復選框。如果不單擊該復選框，它將返回具有相同名稱和值0的輸入框，否則將返回值1。 

<input type="checkbox" name="home['. $row["id"].']" id="home['. $row["id"].']" value="1"/>
<input type="hidden" name="home['. $row["id"].']" id="home['. $row["id"].']" value="0"/>

解決方案2
 0  2018-03-25 06:09:10

在下面的代碼塊中，您的復選框ID及其值設置不正確存在問題。 我用以下方法修復了它： 

echo '<tr>

      <td><span style="font-weight:bold;">'.$row["address"].' '. $row["suburb"].'</span> <button style="float:right;" type="button">Go</button><br><br>


    <div class="row">
        <input type="checkbox" name="id" id="id" value="'.$row["id"].'"/>
        <label class="label" for="home['. $row["id"].']" id="home['. $row["id"].']"></label>

    </div>
        <input style="width:98.5%; margin-top:5px;" type="text" name="notes" placeholder="Add note">
        <br><br>
      </td>
      <td>

      </td>


    </tr>';
echo '</div>';

您的JQuery腳本中有語法錯誤。 他們是固定的。 當取消選中時，您也不會將home設置為0。 並且您不檢查服務器的狀態響應。 我也添加了。

嘗試這個： 

<script>

$(document).ready(function(){
   $('input[type="checkbox"]').click(function(){
        var home = 0;

       if ($('input[type="checkbox"]').is(":checked")) {
            var home = 1;
       }

        var id = $(this).val();
        $.ajax({
             url:"updateaddress.php",
             method:"POST",
             data:{home:home,id:id,},
             success: function(data){
                alert(data);
            },
       });

   });
});

</script>

在您的updateaddress.php中，我添加了狀態輸出以通知您更新成功。

改成： 

<?php
require_once 'config.php';

print_r( $_POST );

$id = mysqli_real_escape_string($conn, $_POST['id']);
$home = mysqli_real_escape_string($conn, $_POST['home']);
$nhd1 = mysqli_real_escape_string($conn, $_POST['nhd1']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht1']);
$nhd2 = mysqli_real_escape_string($conn, $_POST['nhd2']);
$nht1 = mysqli_real_escape_string($conn, $_POST['nht2']);

if(isset($_POST["home"])) {
  $sql = "UPDATE addresses SET home='$home' WHERE id=$id";
  if($conn->query($sql) === TRUE){
    echo "Success";
    } else {
      echo "error" . $sql . "<br>".$conn->error;
    }
  }

?>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AJAX / jQuery / PHP / MySQL - 如何更新數據庫 使用PHP / jQuery / Ajax完成編輯后，更新數據庫中的值 如何通過使用jQuery Ajax單擊以傳遞PHP復選框值 如何從PHP中的數據庫獲取復選框值以獲取更新數據？ 如何基於PHP中的數據庫值顯示選中的復選框 通過ajax，php，jquery傳遞復選框的值 取消選中jquery中復選框的值（使用ajax和php） 如何通過檢查Ajax或php中的文本框值來更新數據庫值 PHP復選框設置為基於數據庫值進行檢查 PHP和jQuery使用復選框值更新文本框
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM