how to fill options in html select based on an html field filled by user.

Question

Here is the code snippet :

<select name="isbn" onchange=" ">

<?php

//Displaying all ISBN in drop down
$result = mysqli_query($con,"SELECT * FROM book");
while($row = mysqli_fetch_array($result)) {
?>
    <option> <?php echo $row['ISBN']; ?></option>
<?php } ?>
</select>
</label></td>
</tr>

<tr>
    <td>Copy Number </td>
    <td><select name="copy_number">
<?php

//Now based on selected book I want to fetch number of copies from database
$result = mysqli_query($con,"SELECT number_of_copies FROM book where isbn = [ SELECTE VALUE FROM ABOVE]");
?>

How can I do that?

Answer 1

You can do that with jQuery ajax and simple php handler to get copies of selected book,

<select name="isbn">
.....
</select>

<div id="copies"></div>

<script>

$.ajax({
        url: "getCopies.php?",
        data: "isbn=" + $("select[name='isbn']").val(),
        type: "POST",
        dataType: "json",
        success: function(response) {
            $.each(response, function(i, item) {
                $("#copies").append(item.name); // Sample json format {id: "213123", name:"Lord of the rings", isbn:"887799..."}
            })
        }   

    });

</script>

getCopies.php

<?php

$isbn = $_POST["isbn"];

// Some db connections

$result = mysqli_query($con,"SELECT number_of_copies FROM book where isbn = $isbn");

$resultArr = array();

while($row = mysqli_fetch_array($result)) {
    $resultArr[] = $row;
}

echo json_encode($resultArr); // This will return rows in json format. You can iterate it in js side