How to dynamically auto fill input textbox fields with select option using php and mysql

Hi Guys, iam working on project but iam currently faced with a challenge to implement OnChange event Javascript method in our code.
I do have two tables; One is for user registration and the other is for stage registration. The scenario is that i must add a user to a stage for which the user id is automatically fetched from the user table and easily adds to the AddUserToStage form, which is working well. However, iam supposed to select the name of the stage from the drop down select option list which displays stage name fetched dynamically from the database table(StageRegistration). The requirement is that when i select a stage name i would like to have other additionally corresponding textfields automatically fetch and fill their corresponding data from the database table(StageRegistration).
How do i do that? Any help is highly appreciated. Below is the sample code ian using;

Code Sample:

Stage Members Dashboard

        <div class="container-fluid" style="width:1200px">
            <div class="row">
                <div class="card">
                    <div class="card-header">
                        <center><h5 class="user_reg mb-2">Add Member to Boda Stage Form</h5></center>
                    </div>

                    <div>
                        <center><i class="fas fa-users fa-xl  fa-fw mt-2 me-2" style="width:60px; height:60px"></i><i class="fas fa-motorcycle fa-xl  fa-fw mt-2" style="width:60px; height:60px"></i></center>
                    </div>
                    <hr style="width:995px; height:2px; color:gray">

                        <div class="card-body bg-img">
                            <form action="#" method="POST">
                                
                                <div class="row">
                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <i class="fa fa-id-badge fa-sm me-2 fa-fw"></i>
                                            <label for="member_id" class="label_deg fs-6">Stage ID</label>
                                            <input type="text" name="stageID" id="stageID" class="form-control form-control-md"  readonly>
                                            
                                        </div>
                                    </div>
                                </div>
    
                                <div class="row mt-2">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fas fa-motorcycle fa-sm me-2 fa-fw"></i>
                                            <label for="stagename" class="label_deg fs-6 mt-1">Stage Name</label>
                                            <select class="form-select mt-2" name="stagename" id="stagename"  required>
                                                <?php
                                                    $query = "SELECT * FROM stageregistration";
                                                    $query_run = mysqli_query($connection,$query);
                                                    if(!$query_run)
                                                    {
                                                        echo "<script type='text/javascript'>alert('Query Failed to Execute')</script>";
                                                    }
                                                    else
                                                    {
                                                        while($row = mysqli_fetch_array($query_run))
                                                        {
                                                            ?>
                                                        <option><?php echo $row['StageName']; ?></option>
                                                         <?php
                                                        }
                                                    }
                                                
                                                ?> 
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fa fa-calendar fa-sm me-2 fa-fw"></i>
                                            <label for="stgcreation_date" class="label_deg fs-6 mt-1">Entry Date</label>
                                            <input type="date" name="stgcreation_date" id="stgcreation_date" class="form-control form-control- 
                             md mt-2"  required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fas fa-location fa-sm me-2 fa-fw"></i>
                                            <label for="stagelocation" class="label_deg fs-6 mt-1">Stage Location</label>
                                            <input type="text" name="stagelocation" id="stagelocation" class="form-control form-control-md"  
                                  required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-2">
                                <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fas fa-user fa-sm me-2 fa-fw"></i>
                                            <label for="stagechairperson" class="label_deg fs-6 mt-1">Stage Chairperson</label>
                                            <input type="text" name="stagechairperson" id="stagechairperson" class="form-control form-control-md" required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fas fa-user fa-sm me-2 fa-fw"></i>
                                            <label for="stagechairpersonNIN" class="label_deg fs-6 mt-1">Stage Chairperson NIN</label>
                                            <input type="text" name="stagechairpersonNIN" id="stagechairpersonNIN" class="form-control form-control-md"  required>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fas fa-phone fa-sm me-2 fa-fw"></i>
                                            <label for="stagechairpersoncontact" class="label_deg fs-6 mt-1">Stage Chairperson Contact</label>
                                            <input type="phone" name="stagechairpersoncontact" id="stagechairpersoncontact" class="form-control form-control-md"  required>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-2">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fas fa-location fa-sm me-2 fa-fw"></i>
                                            <label for="stagevillage" class="label_deg fs-6 mt-1">Village</label>
                                            <input type="text" name="stagevillage" id="stagevillage" class="form-control form-control-md"  required>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fa fa-flag fa-sm me-2 fa-fw"></i>
                                            <label for="stageparish" class="label_deg fs-6 mt-1">Parish</label>
                                            <input type="text" name="stageparish" id="stageparish" class="form-control form-control-md" required>
                                        </div>
                                    </div> 

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <i class="fa fa-flag fa-sm me-2 fa-fw"></i>
                                            <label for="stagedistrict" class="label_deg fs-6 mt-1">District</label>
                                            <input type="text" name="stagedistrict" id="stagedistrict" class="form-control form-control-md"  required>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group mt-3">
                                    <button type="submit" name="registerstage_btn"  class="btn btn-outline-primary btn-sm mt-3 fs-5">Attach User</button>
                                    <button type="reset" name="reset" id="reset" class="btn btn-outline-danger btn-sm mt-3  fs-5" value="Cancel">Cancel</button>
                                </div>
                                
                            </form> 
                        </div>
                </div>
            </div>
        </div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('#stagename').change(function(){ // var stagename = $(this).val(); $.ajax({ // Change the link to the file you are using where the code resides url: '/AddUserToStage.php', dataType: 'json', type: 'POST', // This just sends the value of the dropdown data: { stagename: $(this).val() }, success: function(response) { // Parse the jSON that is returned // Using conditions here would probably apply // incase nothing is returned var Vals = JSON.parse(response); // These are the inputs that will populate $("input[name='stageID']").val(Vals.stageID); $("input[name='stgcreation_date']").val(Vals.stgcreation_date); $("input[name='stagelocation']").val(Vals.stagelocation); $("input[name='stagechairperson']").val(Vals.stagechairperson); $("input[name='stagechairpersonNIN']").val(Vals.stagechairpersonNIN); $("input[name='stagechairpersoncontact']").val(Vals.stagechairpersoncontact); $("input[name='stagevillage']").val(Vals.stagevillage); $("input[name='stageparish']").val(Vals.stageparish); $("input[name='stagedistrict']").val(Vals.stagedistrict); } }); }); }); </script>

Start with the supplied form code and includes/connection.php, then trace the existing stage-registration and user-attachment flow. Confirm how StageRegistration records and the form fields are represented before defining the required behavior. Done should mean selecting a stage reliably populates the specified fields and preserves the existing attach-user workflow.