簡體   English   中英

Output 數據從 MYSQL 表到 HTML 表格取決於用戶選擇

[英]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

如何從表格中將所選房間的費用輸入到表格上的正確輸入框中?

通過您的代碼,我發現這將是解決它的漫長道路。

  • 解決它的第一步是將您的數據放入可重用的前端源中,例如 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 數組中,您首先可以關閉數據庫連接,這樣就不會在多個請求中使用不必要的資源

  • 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM