Dynamically adding data to div from model on dropdown select

I've been searching for quite a while and can't find a solid answer for this. I'm using Laravel 5.3 as well as Laravel Collective for the forms and Chosen to manipulate my select boxes.

Basically I have a select dropdown, which has values in it that are pulled from the database. When I select a value, I wan't to populate each empty 'panel' on the page with the relevant model data for the selected item.

So for example when I select 'admin' I want to look in the 'roles' table and display 'description' and 'display_name' associated with the selected value. Furthermore I want to get the associated permissions for that entry and display them as well.

Here is my form:

                            <div class="form-group">
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $(".role").chosen()
                                    });
                                </script>
                                {!! Form::label('Role') !!}
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="fa fa-user-plus" aria-hidden="true"></i></div>
                                    {!! Form::select('role', $roles, null, ['id' => 'role', 'class' => 'select-width-100 form-control role']) !!}
                                </div>
                            </div>
                            {!! Form::label('Display Name') !!}
                            <div class="panel panel-default">
                                <div class="panel-body" name="d_name" id="d_name">

                                </div>
                            </div>
                            {!! Form::label('Description') !!}
                            <div class="panel panel-default">
                                <div class="panel-body" name="description" id="description">

                                </div>
                            </div>

                            <div class="input-group">
                              <span class="input-group-btn">
                                <button class="btn btn-danger" type="submit" name="update">Update</button>
                              </span>
                            </div>

I know there is a way to fire ajax and receive it with a 'route::get' but I have no idea how to do this or where to start. My Jquery skills are severely lacking.

Any help would be greatly appreciated.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2c4ZcW4
via IFTTT