如何根据复选框更新数据库值？ jQuery的/ PHP / AJAX

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何根据复选框更新数据库值？ jQuery的/ PHP / AJAX相关的知识，希望对你有一定的参考价值。

一直试图想出这个但却没有到达任何地方。

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

创建另一个具有相同名称和值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"/>
另一答案

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

?>

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

根据数组值使用 jquery 设置复选框

如何使用jQuery更新数据表中的所有多行？

复选框状态更改时如何更新mysql字段？使用 jquery (ajax)、php 和 mysql

使用jquery检查复选框时如何更新数据库？

jquery如何根据多选框name来获得选中的值。

Rails 4：如何在 Rails 中使用 JQuery 禁用基于复选框值的文本字段