我有一个 MYSQL 表(roomcost)，用于保存租用房间的成本。
costID Room Cost 1 room1 15 2 room2 30 3 room3 50
rsRoomCost SQL is: SELECT * FROM roomcost
The HTML form has checkboxes that allow the hirer to make the choice of Room 1, Room 2 or Room 3. The hirer can hire one, any two or all three rooms.
<input type="checkbox" name="room1" value="room1" onClick="Check()">Room 1</div>
<input type="checkbox" name="room2" value="room2" onClick="Check()">Room 2</div>
<input type="checkbox" name="room3" value="room3" onClick="Check()">Room 3</div>
该表格还为每个房间提供了一个输入框(一旦我开始工作，该输入框将被隐藏)，该输入框将填充表格中的适当费用。提交表格后，租用者的记录将保存该租用者在租用时所选择的房间和支付的费用。
该 JS 脚本检查是否选中了特定复选框并将成本输出到相关输入框。
function Check() {
if (document.forms["bookform"].room1.checked) {
document.forms["bookform"].thisRoom1.value = "<?php echo($row_rsRoomCost['room1']; ?>";
} else if (document.forms["bookform"].room2.checked) {
document.forms["bookform"].thisRoom2.value = "<?php echo($row_rsRoomCost['room2']; ?>";
} else if (document.forms["bookform"].room3.checked) {
document.forms["bookform"].thisRoom3.value = "<?php echo($row_rsRoomCost['room3']; ?>";
}
}
输出的输入框是:
Room 1: <input type="text" name="thisRoom1" value="">
Room 2: <input type="text" name="thisRoom2" value="">
Room 3: <input type="text" name="thisRoom3" value="">
如您所见，我正在尝试使用 php 填充数据库表中的相关值。但是，当然，这仅显示成本表中第一条记录的成本，无论检查哪个房间。
如何将表格中所选房间的费用输入到表单上的正确输入框中？
我已经尝试过<?php echo($row_rsRoomCost['room1']) where ($row_rsRoomCost['costID']) = '1'; ?>但这行不通。我考虑过“案例”陈述，但不知道它是如何运作的。我能想到的唯一方法是为每个房间使用单独的 SQL 语句。例如:SELECT * FROM roomcost WHERE costID = 1
如何将表格中所选房间的费用输入到表单上的正确输入框中？
最佳答案
查看你的代码，我发现这将是解决它的漫长之路。
- 解决这个问题的第一步是将您的数据放入可重用的前端源中，例如 JSON(更容易使用)。
示例:(结果在控制台日志 F12 中)
<?php
$servername = "localhost";
$username = "root";
$password = "jono23";
$dbname = "helpothers";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM `roomcost`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
// echo "id: " . $row["costID"]. " - Name: " . $row["room"]. " " .$row["cost"]. "<br>";
// data you want to send to json
$data[] = array(
'id' => $row['costID'],
'room' => $row['room'],
'cost' => $row['cost']
);
//}
}
} else {
echo "0 results";
}
$conn->close();
$json_data = json_encode($data);
//print_r($json_data);
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id='bookform' >
<input type="checkbox" name="room1" value="room1" onClick="Check()">Room 1</input>
<input type="text" name="room1value" readonly><br>
<input type="checkbox" name="room2" value="room2" onClick="Check()">Room 2</input>
<input type="text" name="room2value" readonly><br>
<input type="checkbox" name="room3" value="room3" onClick="Check()">Room 3</input>
<input type="text" name="room3value" readonly><br>
</form >
<script type="text/javascript">
var Rooms = JSON.parse('<?php print_r($json_data) ; ?>');
console.log(Rooms);
function Check() {
//room1
if (document.forms["bookform"].room1.checked)
{
document.forms["bookform"].room1value.value = Rooms[0].cost;
console.log(Rooms[0].cost);
}else{
document.forms["bookform"].room1value.value ='';
}
//room2
if (document.forms["bookform"].room2.checked)
{
document.forms["bookform"].room2value.value = Rooms[1].cost;
console.log(Rooms[1].cost);
}else{
document.forms["bookform"].room2value.value ='';
}
//room3
if (document.forms["bookform"].room3.checked)
{
document.forms["bookform"].room3value.value = Rooms[2].cost;
console.log(Rooms[2].cost);
}else{
document.forms["bookform"].room3value.value ='';
}
}
</script>
</body>
</html>
通过首先将 SQL 查询结果编码到 json 数组中，您可以 关闭数据库连接，以免占用不必要的资源 针对多个请求
然后通过将 PHP JSON 对象调用到 JavaScript 中，您可以更轻松地将其应用于您的 html 和 JavaScript 需求
将 PHP 数据转换为 JSON 并使用 JavaScript 进行解析帮助我们处理诸如 Rest api 之类的事情
这就是为什么 JSON 实现可以在许多语言中找到的主要原因，因为它是跨不同编码语言共享数据的简单方法
我对数据处理提出的另一个建议是不要将值存储在复选框中。为此目的创建另一个文本输入并将它们存储在那里。例如
<input type='text' id='gethandle1'>
<script>
let box1 = document.getElementById('gethandle1');
box1.value = Rooms[0].cost;
</script>
希望这对您有帮助。
关于javascript - 根据用户选择将 MYSQL 表中的数据输出为 HTML 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58941437/