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

【问题标题】：How to update database value based on checkbox? Jquery/php/ajax如何根据复选框更新数据库值？ 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;
    }
  }

【问题讨论】：

    标签： php jquery mysql ajax checkbox


    【解决方案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 );在顶部。再次进行测试，以便清楚地了解您正在处理的数据。
    猜你喜欢
    • 2020-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-23
    • 1970-01-01
    • 2018-10-26
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode