[英]Output Data From MYSQL Table Into HTML Form Depending On User Choice
我有一張 MYSQL 表(roomcost),其中包含租用房間的成本。
costID Room Cost 1 room1 15 2 room2 30 3 room3 50
rsRoomCost SQL 是: SELECT * FROM roomcost
HTML 表格有復選框,允許租用者選擇房間 1、房間 2 或房間 3。租用者可以租用一個、任何兩個或全部三個房間。
<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>
該表格還有一個輸入框(一旦我開始工作,它將被隱藏),每個房間將填寫表格中的適當費用。 提交表格后,租用者記錄將保存該租用者在租用時所支付的房間和費用的選擇。
檢查是否選擇了特定復選框並將 output 成本發送到相關輸入框的 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']; ?>";
}
}
output 的輸入框為:
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'; ?>
<?php echo($row_rsRoomCost['room1']) where ($row_rsRoomCost['costID']) = '1'; ?>
但這不起作用。 我考慮過“案例”陳述,但不知道這將如何運作。 我能想到的唯一方法是每個房間單獨的 SQL 聲明。 例如: SELECT * FROM roomcost WHERE costID = 1
如何從表格中將所選房間的費用輸入到表格上的正確輸入框中?
通過您的代碼,我發現這將是解決它的漫長道路。
示例:(結果在控制台日志 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 數組中,您首先可以關閉數據庫連接,這樣就不會在多個請求中使用不必要的資源
Then By calling that PHP JSON Object into JavaScript you can more easily apply it to your html and JavaScript Needs
將 PHP 數據轉換為 JSON 並使用 JavaScript 進行解析
這就是為什么 JSON 實現可以在許多語言中找到的主要原因,因為它是一種在不同編碼語言之間共享數據的簡單方法
我為處理數據提出的另一個建議是不要將值存儲在復選框中。 為此目的創建另一個文本輸入並將它們存儲在那里。 例如
<input type='text' id='gethandle1'>
<script>
let box1 = document.getElementById('gethandle1');
box1.value = Rooms[0].cost;
</script>
我希望這可以幫助你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.