Setting a select list from values in a database

Question

I have 2 select lists, one naming products and another for quantities.

<select name="fish" id="fish">
    <option value="blueFish">Blue Fish</option>
    <option value="redFish">Red Fish</option>
    <option value="pinkFish">Pink Fish</option>
    <option value="greenFish">Green Fish</option>
</select>

<select name="numFish" id="numFish">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
   <option value="6">6</option>
</select>

I would like it so when a product is chosen, the corresponding quantity from the database will be set accordingly.

So if there was a record that customer Billy had bought 5 Pink Fish, when I select Pink Fish, the quantity select list will change to 5.

This would be for use in a PHP form using a MySQL database.

Is such functionality possible, and if so how would I go about doing it?

Answer 1

You might want to google for ajax requests. What it does is detecting a change (in your case) through javascript, send the value you selected to another php script which should do a sql query to return the quantity. The ajax request will catch the returned value and through javascript again change the value from the select dropdown.

All this would happen in the background and your site wouldn't refresh.

If you are not very used to javascript you can have a look at the jquery framework, which makes this task a bit easier, and with a lot of examples documented.

I didn't paste any code because assume you are not familiar with javascript/jquery/ajax. You might want to read a bit of documentation and play around a bit, and come back when you have a concrete problem, that would be the normal workflow here in Stackoverflow.

Edit: (some code as requested by OP) Javascript:

$('#fish').change(function(){
    var fishType = $('#fish select option:selected');
    $.ajax("getQuantity.php", {fish: fishType}, function(data){
        data = JSON.parse(data);
        if(data.status == "OK"){
            var quantity = data.quantity;
            $('#numFish option[value='+quantity+']').prop("selected", true);
        } else {
            alert("error");// or console.log(), whatever you prefer
        }
    }
});

php (getQuantity.php):

<?php
    $fish = $_POST['fish']; //getting the fish type
    $sql = "your SQL to select the fish quantity for that type";
    $result = mysqli_query($mysqli, $sql);

    if(mysqli_num_rows($result)>0){
        $row = mysqli_fetch_assoc($result);
        $data = array("status" => "OK", "quantity" => $row['quantity']); // you can just output a string with the number if you want, but this way you have more control and better debugging.
        echo json_encode($data);
    }
?>

It's a basic code, it still would need to catch some errors for the database or return a different status. But basically that's it. I didn't even test that code so use it as a guideline only.

Answer 2

Change <select name="fish" id="fish"> to <select name="fish" id="fish" onchange="getQuantity(this.value);">

Declare the following function in javascript:

function getQuantity( o ) {
   // get the quantity from the database using ajax,
   // and set the quantity dropdown here.
}