Question

我有一个名为new_booking.php的页面和一个名为addmore.php的页面，我需要在new_booking.php内添加addmore.php，当我单击添加更多按钮时，它会添加一个动态下拉字段。这是我的代码的快照

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

现在的问题是，当我单击添加更多按钮时，它只是在下拉列表中添加了一个文本字段，而没有来自数据库的值。这是我的addmore.php代码的快照

<DIV class="product-item float-clear" style="clear:both;"> <DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>

    <DIV > <select class = "mdl-textfield__input"  id="categories"  name="roomtype[]" >
                  <option value="">Choose Room Type</option>
                          <?php
                               $resultUser = mysqli_query($conn, "SELECT * FROM room_type ");

                                   //$NoRowStaff = mysqli_num_rows($resultStaff);
                                 if ($resultUser->num_rows > 0)


                                // Loop through the query results, outputing the options one by one
                                 while($row = $resultUser->fetch_assoc())  {
                                   echo '<option value="'.$row['rt_id'].'">'.$row['type'].'</option>';
                                }

                          ?>
                                                  </select></DIV> <br><br>

    <DIV> <select class = "mdl-textfield__input" name="roomno" id="subcat" required>
        <option value="" selected>Choose Room number.... </option>   </select></DIV>

    </DIV>

我如何将数据库中的值追加到新添加的下拉字段中，以便每当我单击addmore按钮时，它就会附带数据库中的值？

Answer 1

您尝试完成此任务的方式将无法正常工作。.因为据我所知，您正在尝试在javascript函数中调用php函数。您可以做的是实现一个ajax函数。 https://www.w3schools.com/xml/ajax_intro.asp

该过程将如下所示： 1.网页中发生事件（单击按钮） 2. Ajax对象将请求发送到Web服务器 3.服务器处理请求（例如从数据库获取值） 4.服务器将响应发送回网页 6.响应由JavaScript读取

然后，您可以将此值动态附加到您的选项中：）

根据评论的要求进行简单演示 http://crisscrosscrass.epizy.com/ajaxexample.php

代码 ajaxexample.php

<body>
<div id="" class="App-header">
    <h1>This is an AJAX Example</h1>
    <button onClick="addMore()">Add more </button>
    <div id="output">
    <div>
</div>
<script>
function addMore(){
    $.ajax({
        type: "POST",
        url: "addmore.php",
        // data: data, <--- in case you want also send some data to the server like Username etc.
        success: function(data) {               
        $("#output").append(data);
        },
        error: function(){
            // will fire when timeout is reached
             $("#output").html("<h1>connection to the server failed!</h1>");
             },
             timeout: 1200
            });
}
</script>
</body>

代码 addmore.php

<?php
//here you need to put you function for calling the database and return the values that you need
echo "Calling DatabaseRandom Value " . (rand() . "<br>");
?>

如何将数据库值传递给动态添加的下拉字段

1 个答案: