How to pass database value to a dynamically added dropdown field

Question

I have a page called new_booking.php and a page called addmore.php, i required the addmore.php inside the new_booking.php,When i click on the add more button it adds a dynamic drop down field. here snapshot of my code

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

Now the problem is when i click on the add more button it just add a text field without the value from database in a drop down.here is a snapshot of my addmore.php code

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

How do i get to Append the value from the database to the newly added drop-down field, so that anytime i click on the addmore button it comes with value from database?

CrissCrossCrass · Accepted Answer · 2019-04-11 06:28:29Z

2

The way you are trying to complete this task will not work..because as far as i can understand your code, you are trying to call a php function within a javascript function. What you can do is to implement a ajax function. https://www.w3schools.com/xml/ajax_intro.asp

the process will look like this: 1. An event occurs in a web page (a button is clicked) 2. The Ajax object sends a request to a web server 3. The server processes the request (like get value from database) 4. The server sends a response back to the web page 6. The response is read by JavaScript

and after this you can append this value dynamically to your options :)

As Requested per Comment a simple Demo http://crisscrosscrass.epizy.com/ajaxexample.php

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

code 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>");
?>

edited Apr 11, 2019 at 6:28

answered Apr 10, 2019 at 15:11

CrissCrossCrass

1214 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CrissCrossCrass Over a year ago

i will edit my answer tomorrow with a full working php example, so you can easily use for you own :)

CrissCrossCrass Over a year ago

ah btw. do you use jquery? makes this ajax process much easier :)

Collectives™ on Stack Overflow

How to pass database value to a dynamically added dropdown field

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related