Passing data from Blade to modal in Laravel

Question

I have a situation like display table with different columns, say the first column is id and the second column is name, the third column has a button which on click opens up a modal; the data in the table is coming from foreach loop.

I want to pass the id to the modal when button clicked.

                                    <td>{{ $emp->req_id}} </td>

                                    <td>{{ $emp->empid}} </td>
                                    <td>{{ $emp->visit_title}} </td>
                                    <td>{{ $emp->stays_nights}}</td>
                                    <td>{{ $emp->apply_date }}</td>
                                    <td>{{ $emp->travel_charges }}</td>
                                    <td>{{ $emp->hotel_charges }}</td>
                                    <td>{{ $emp->meal_charges }}</td>

                                    <td>{{ $emp->approv_status}}</td>

                                @endforeach
                                </tr> 
                                </tbody> 

Answer 1

For this, you can use jquery

step(1) add this code in your blade file

 <button type="button" data-toggle="modal" data-target-id="{{ $emp->id }}" data-target="#modelName">Button name </button>

step (2) define your jquery method

 <script>
            $(document).ready(function () {
                $("#modelName").on("show.bs.modal", function (e) {
                    var id = $(e.relatedTarget).data('target-id');
                    $('#pass_id').val(id);
                });
            });

</script>

step (3) Make Modal

<div class="modal fade" id="modelName" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel">
                            <div class="modal-dialog data-dialog-centerd" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span></button>
                                        <h4 class="modal-title text-center" id="myModalLabel">Model header Name</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal" action="#"
                                              method="post"
                                              enctype="multipart/form-data">

                                            {{ csrf_field() }}

                                            <div class="portlet-body form">
                                                <div class="form-body">
                                                    <div class="form-group">
                                                        <input class="form-control" name="name" type="text"
                                                               id="pass_id">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>