Introduction

I hope you are you having a nice "codie" day. Today I will be putting you through how you can easily pass data to bootstrap modal with just few codes.

In my own case I required this when I had my data in a table and I needed to perform some kind of action on the data on the table individually.

I will be using approval or declining of loans which is the scenario implemented that prompted this right up.

Their are are two options to go about this, as explained below. We will be considering the table below.

1. Option 1: Using javascript (jQuery) transfer the data to the modal. This way we will only need to have one modal for all the records in the table. You need to add a script like below to your page

<script>
$('.decline-loan-button').on('click', function () {
$('#package_name').val($(this).data('package_name-input'));
$('#investor_name').val($(this).data('investor_name-input'));
$('#amount').val($(this).data('amount-input'));
$('#balance').val($(this).data('balance-input'));

//If you want to pass data to for action for a form, you can do this 
 $('#decline-loan-form').attr('action', $(this).data('decline-link'));
});
</script>

Then in your HTML, you should have something like this.

@foreach($loans as $loan)

  <button class="btn btn-danger decline-loan-button" role="button"  
    data-investor_name-input="{{$loan->investor_name }}" 
    data-package_name-input="{{$loan->package_name }}" 
    data-amount-input="{{$loan->amount}}" 
    data-balance-input="{{$loan->balance}}" 
    data-toggle="modal" 
    data-target="#modal-decline">
Decline
</button>

@endforeach

 <div class="modal fade" id="modal-decline" tabIndex="-1">   
   <input type="text" name="investor_name">
    <input type="text" name="package_name" value="">
    <input type="number" name="amount" value="">
    <input type="number" name="balance" value="">
 </div>

1. Option 2: Create a modal for each record you have, you can do this by giving each modal a unique id. I am asumming you have passed a variable to your view from your controller. In my own case the variable name is "$loans" as you can see below.

@foreach ($loans as $loan)
<<--- Here is the button that will be displayed to click and show the modal--->>>
    <button type="button" class="btn btn-danger" role="button" data-toggle="modal" data-target="#modal-decline-{{ $loan->id }}">Decline </button>

<<---Here is the modal--->>>
    <div class="modal fade" id="modal-decline-{{ $loan->id }}" tabIndex="-1">   
     <input type="hidden" name="id" value="{{$loan->id}}">
  <input type="text" name="investor_name" value="{{$loan->investor_name}}">
  <input type="text" name="package_name" value="{{$loan->package_name}}">
  <input type="number" name="amount" value="{{$loan->amount}}">
<input type="number" name="balance" value="{{$loan->balance}}">
    </div>
@endforeach

With this method we have passed all possible loan attributes directly into the modal.

Conclusion

You can always pick the one, you find most suitable for your situation. For me the second option is my favorite way of doing it. If you have any comment or question, you can always drop a comment