一直试图解决这个问题,但没有到达任何地方。
我使用标签作为复选框。选中一个复选框,我希望将数据库的值更新为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)
创建另一个具有相同名称和值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"/>
答案 1 :(得分: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;
}
}
?>