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

[Timkats]

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/[email protected]/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>

[Timkats]

Hi Guys, iam working on a project form where by i would like to search for data from the mysql database using ID and then auto fill out the input textbox fields. Ihave tried to write up a code as seen below but failed to show corresponding data in the various form fields. Any Help is highly welcome. See code below:

HTML Form:

Stage Name Search

  <div>
 <button class="btn btn-outline-primary mt-1" name="searchdata" id="searchdata">Search</button>
   </div>

   <div>
  <label for="stagename" class="label_deg fs-6 mt-1">Stage Name</label>
<input type="text" name="stagename" id="stagename" class="form-control form-control-md " value="<?php echo $row['StageName']; ?>" required>

Stage ID

Entry Date

Stage Location

Stage Chairperson

Stage Chairperson NIN

Stage Chairperson Contact

Village

Parish

District

PHP CODE (getStage.php)

0) { while($row = mysqli_fetch_assoc($resultSet)) { $data = $row; } } echo json_encode($data); } ?>

JSON FILE

<script> $(document).ready(function(){ $('#searchdata').click(function(e){ e.preventDefault(); var id = $("input[name=id]").val(); $.ajax({ type: "POST", url: 'getStage.php', data: { "search_post_btn": 1, "id": id, }, dataType: "text", success: function(result){ var jsondata = $.parseJSON(result); $("input[name='stagename']").val(jsondata[id].stagename); $("input[name='id']").val(jsondata[id].id); $("input[name='stgcreation_date']").val(jsondata[id].stgcreation_date); $("input[name='stagelocation']").val(jsondata[id].stagelocation); $("input[name='stagechairperson']").val(jsondata[id].stagechairperson); $("input[name='stagechairpersonNIN']").val(jsondata[id].stagechairpersonNIN); $("input[name='stagechairpersoncontact']").val(jsondata[id].stagechairpersoncontact); $("input[name='stagevillage']").val(jsondata[id].stagevillage); $("input[name='stageparish']").val(jsondata[id].stageparish); $("input[name='stagedistrict']").val(jsondata[id].stagedistrict); } }); }); }); </script>