Javascript 根据用户的选择，将数据从MYSQL表输出到HTML表单

我有一个MYSQL表（roomcost），其中包含租用房间的费用

costID Room Cost 1 room1 15 2 room2 30 3 room3 50 表单还有一个输入框（一旦我让它工作起来，它就会隐藏起来），每个房间都会填入表中相应的成本。提交表格时，租用人记录将记录租用人在租用时选择的房间和支付的费用

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']; ?>";
    } 
}

函数检查（）{
if（文件格式[“书格式”].room1.选中）{
document.forms[“bookform”].thisRoom1.value=“仔细查看您的代码，我发现这将是解决此问题的漫长道路


解决这个问题的第一步是将数据放入一个可重用的前端源代码中，比如JSON（更容易使用）

示例：（结果在控制台日志F12中）


1号房间


2号房间


3号房间


var Rooms=JSON.parse（“”）；
控制台、日志（房间）；
函数检查（）{
//1号房间
if（文件格式[“书格式”].room1.选中）
{
document.forms[“bookform”]。room1value.value=房间[0]。成本；
console.log（房间[0]。成本）；
}否则{
document.forms[“bookform”].room1value.value=''；
}
//房间2
if（文件格式[“书格式”].room2.选中）
{
document.forms[“bookform”]。room2value.value=房间[1]。成本；
console.log（房间[1]。成本）；
}否则{
document.forms[“bookform”].room2value.value=''；
}
//3号房间
if（文件格式[“书格式”].room3.选中）
{
document.forms[“bookform”]。room3value.value=房间[2]。成本；
console.log（房间[2]。成本）；
}否则{
document.forms[“bookform”].room3value.value=''；
}
}


通过将SQL查询结果编码到json数组中，您首先能够
关闭数据库连接，以免占用不必要的资源
在多个请求上

然后，通过将PHP JSON对象调用为JavaScript，您可以更轻松地将其应用于html和JavaScript需求

将PHP数据转换为JSON并使用JavaScript进行解析可以帮助我们处理RESTAPI之类的事情


这就是为什么JSON实现可以在许多语言中找到的主要原因，因为它是跨不同编码语言共享数据的一种简单方法

我对数据处理的另一个建议是不要将值存储在复选框中。为此创建另一个文本输入并将它们存储在那里

<input type='text' id='gethandle1'>
<script>
let box1 = document.getElementById('gethandle1');
box1.value = Rooms[0].cost; 
</script>


设box1=document.getElementById（'gethandle1'）；
box1.value=房间[0]。成本；

我希望这能对您有所帮助。
仔细阅读您的代码，我发现这将是解决问题的漫长道路


解决这个问题的第一步是将数据放入一个可重用的前端源代码中，比如JSON（更容易使用）

示例：（结果在控制台日志F12中）


1号房间


2号房间


3号房间


var Rooms=JSON.parse（“”）；
控制台、日志（房间）；
函数检查（）{
//1号房间
if（文件格式[“书格式”].room1.选中）
{
document.forms[“bookform”]。room1value.value=房间[0]。成本；
console.log（房间[0]。成本）；
}否则{
document.forms[“bookform”].room1value.value=''；
}
//房间2
if（文件格式[“书格式”].room2.选中）
{
document.forms[“bookform”]。room2value.value=房间[1]。成本；
console.log（房间[1]。成本）；
}否则{
document.forms[“bookform”].room2value.value=''；
}
//3号房间
if（文件格式[“书格式”].room3.选中）
{
document.forms[“bookform”]。room3value.value=房间[2]。成本；
console.log（房间[2]。成本）；
}否则{
document.forms[“bookform”].room3value.value=''；
}
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

            $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>

<input type='text' id='gethandle1'>
<script>
let box1 = document.getElementById('gethandle1');
box1.value = Rooms[0].cost; 
</script>