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

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>