如何根据复选框更新数据库值？ jQuery/php/ajax

Posted 2023-05-09

技术标签:

【中文标题】如何根据复选框更新数据库值？ jQuery/php/ajax【英文标题】：How to update database value based on checkbox? Jquery/php/ajax 【发布时间】：2018-09-03 11:59:59 【问题描述】：

尝试了几个小时试图弄清楚这一点，但没有得到任何结果。

我将标签用作复选框。在选中一个复选框时，我希望将数据库的值更新为 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;

【问题讨论】：

【参考方案1】：

再创建一个同名同值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】：

在下面的代码块中，您的复选框 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;
    
  

?>

【讨论】：

您好，感谢您的回复。我也试过这个，但无法让它工作。可能与这条线有关... ？试试并确保 $row["id"] 具有价值。抱歉，仍然无法正常工作。 $row["id"] 在数据库中具有 id 值。使用此代码时，标签不再切换。我尝试显示实际的复选框并进行测试，但仍然无法在数据库中更新值检查 updateaddress.php 的更新。我添加了 print_r( $_POST );在顶部。再次进行测试，以便清楚地了解您正在处理的数据。

以上是关于如何根据复选框更新数据库值？ jQuery/php/ajax的主要内容，如果未能解决你的问题，请参考以下文章

我们如何在 jQuery/php/mySQL 中显示最近的通知？更新

从 HTML 中的复选框值更新 MySql 数据库的建议

PHP：如何使用 whereIn 子句根据多个 ID 更新一列

如果选中则如何更新数据库1的复选框值，如果未选中则更新为0？

如果提交表单时未选中复选框，如何将布尔值更新为 0

如何根据值检查复选框？