PHP - Populate form fields based upon <select> <option> value

Question

I am trying to populate a form based upon the option selected in the <select> . The eventTitle field in the DB has corresponding fields located at the bottom of the code. If I select option 1, I want the form to be populated with the fields corresponding to option 1. I am not sure the best way to do this. Thanks in advance. Also, if you have any other recommendations on things I should do differently, like if I am coding a bad practice, please advise. Thanks!

require_once "functions.php";

//this creates a reference to the connection which is in the functions.php file
$connection = getConnection();






//so far this gets all the event titles and echos out a drop down list with them in. yay
$sqlPopulateQuery = "SELECT eventTitle, eventID from NE_events";
$queryResult = $connection->query($sqlPopulateQuery);

echo "Event Title: <select name='eventTitle'>";
while ($record = $queryResult->fetchObject()) {
    echo "<option value='{$record->eventTitle}'>{$record->eventTitle}</option>";
}
echo "</select>";

//if a specific event is selected
    //get eventID from database
    //populate textfield with eventID



//echo "Event ID:  <input type='text' ' name='eventID' readonly><br>";
//echo "Venue ID: <input type='text' name='venueID'><br>";
//echo "Category ID: <input type='text' name='categoryID'><br>";
//echo "Start Date: <input type='date' name='eventStartDate'><br>";
//echo "End Date: <input type='date' name='eventEndDate'><br>";
//echo "Price: <input type='text' name='eventPrice'><br>";




?>```

Answer 1

You can achieve your requirement with either plain javascipt or with Jquery library, below I have listed each of the methods

1.Using javascript solution

<?php   
while ($record = $queryResult->fetchObject()) {
    echo "<option value='{$record->eventTitle}' onChange="popuplateData({$record->eventTitle})">{$record->eventTitle}</option>";
}
echo "Event ID:  <input type='text' id='eventID' name='eventID' readonly><br>";
?>

<script>
function popuplateData(option){

    if(option === 'title1'){ // For each option you can modify based on value
        document.getElementById('eventID').value = 'event 1';   
        //More fields goes here
    }

}
</script>

2.Using Jquery solution

<?php 
echo "Event Title: <select name='eventTitle' id='eventTitle'>";
while ($record = $queryResult->fetchObject()) {
    echo "<option value='{$record->eventTitle}'>{$record->eventTitle}</option>";
}
echo "</select>";
echo "Event ID:  <input type='text' id='eventID' name='eventID' readonly><br>";
?>

<script>
jQuery(document).ready(function($) {
    $("#eventTitle").change(function(){
        var optionVal = $(this).val();  
        if(optionVal != ''){
            if(optionVal === 'title1'){// For each option you can modify based on value
                $('#eventID').val('event 1');   
                //More fields goes here
            }   
        }
    });
});
</script>