Populate a table dynamically when selecting an option in selection box using Laravel?

user_16484935 0
Viewed 47

Hi I'm new to Laravel and trying Laravel 8. In my web app there is a pop up to select a option, the select box is also dynamically populated. I need to fetch some data from the database to a table on the pop up based on the selected option without reloading the page.

The code of the pop up.

<div id="UpgradeStudentModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel">Upgrade Student</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="post" enctype="multipart/form-data">
                    {{csrf_field()}}

                    <div class="mb-3">
                        <label for="" class="form-label">Teacher</label>
                        <select class="form-control" name="teacherId">
                            @foreach($teachers as $teacher)
                                <option value="{{$teacher->tId}}">{{$teacher->tName}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Save
                        </button>
                        <button type="button" class="btn btn-outline-danger waves-effect waves-light"
                                data-bs-dismiss="modal">Close
                        </button>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Sorry but I have no code to describe what I have tried.

This is a screenshot of the pop up.

Screenshot of the pop up

I need to get a dynamic output like this.

Expected out put

I can edit the question to provide more code as your request, I just don't know what will help right now.

laravel-8 laravel php
1 Answers

You can use Ajax to submit your form and fetch necessary data. I haven't your controller so can not place related values in my example for you but you can send it here or change this example in order to your real situation. Please look at this example:

<div id="UpgradeStudentModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myModalLabel">Upgrade Student</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    <div class="mb-3">
                        <label for="" class="form-label">Teacher</label>
                        <select class="form-control" name="teacherId" id="teacherId">
                            @foreach($teachers as $teacher)
                <option value="{{$teacher->tId}}">{{$teacher->tName}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="modal-footer">                        
                        <button type="button" class="btn btn-outline-danger waves-effect waves-light"
                                data-bs-dismiss="modal">Close
                        </button>

                    </div>                    
            </div>
        </div>
    </div>
</div>

<script>
        $(document).ready(function () {                   
            $('#teacherId').on('change', function () {
                var idTeacher = this.value;
                                
                $.ajax({
                    url: "{{url('your form url')}}",
                    type: "POST",
                    data: {
                        teacher_id: idTeacher,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',                 
                    success: function (result) {                        
                        $.each(result.teachers, function (key, value) {                            
                        $("#your-modal-div-id").append('<span>' + value.name + '</span>');                          
                        });                                            
                     }
                 });
              });
user_149035140
Related