Question

I am trying to populate a dropdown box using the selection from another dropdown box. I have already figured out how to populate the list using data from the database, it seems the problem is in getting what they have selected from the first dropdown box on the same page without submitting the form. This is what I have so far.

<select name = "trainer_has_update_pokemon">
<p>Trainer</p>
<?php
$query = "SELECT name FROM Trainer";

if ($stmt = $mysqli->prepare($query)) {
$stmt->execute();
$stmt->bind_result($name);
while ($stmt->fetch()) {
    echo"<option>$name</option>";
}


$stmt->close();
}


?>
</select>

<?php
$trainer_name = $_GET['trainer_has_update_pokemon'];
?>

<p>Pokemon</p>
<select name = "type_of_update_pokemon">
<?php
$query = "SELECT DISTINCT p.name FROM Pokemon p WHERE p.owner_id = (SELECT t.trainer_id FROM Trainer t WHERE t.name = '$trainer_name')";
if ($stmt = $mysqli->prepare($query)) {
$stmt->execute();
$stmt->bind_result($pkmn_name);
while ($stmt->fetch()) {
    echo"<option>$pkmn_name</option>";
}
$stmt->close();
}
?>

I don’t really have any experience in Javascript or AJAX, so if there is a way to do this without those, that would be helpful, but if not, I am open to learning their application in this case.

Answer 1

Unfortunately, you will need some sort of client side script to call an external php page in order to pull in the data in real-time. A quick mock up would look something like:

javascript:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){ //document ready
    $('select[name="trainer_has_update_pokemon"]').change(function(){ // when trainer_has_update_pokemon changes
        $.ajax({
            type:"POST", //send a post method
            url:'ajax.php', // path to ajax page
            data:"trainer_name="+$(this).val(), //set trainer_name to value
            success:function(response){ // retrieve response from php
                $('select[name="type_of_update_pokemon"]').html(response); // update select
            }
        });
    });
});
</script>

PHP (i’ve named ajax.php):

<?php
/* ADD YOUR DATABASE CONNECTION */
$trainer_name = $_POST['trainer_name']; // DONT FORGET TO ESCAPE!!
$query = "SELECT DISTINCT p.name FROM Pokemon p WHERE p.owner_id = (SELECT t.trainer_id FROM Trainer t WHERE t.name = '$trainer_name')";
if ($stmt = $mysqli->prepare($query)) {
    $stmt->execute();
    $stmt->bind_result($pkmn_name);
    while ($stmt->fetch()) {
        echo"<option>$pkmn_name</option>";
    }
    $stmt->close();
}?>