(Laravel) Confirmation modal on delete button - php

Question

I have a view which display a table of users from the database and the last column has delete button on it which currently work fine for me but i want to display confirmation model and when the user click on Delete button it will delete the selected use
This is the current code for delete button which is work fine:
<button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-trash3"></i></button>
Now i used this modal which i have to click on delete button in order to delete the selected user
<div class="modal fade text-xs-left" id="iconModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" 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" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
</div>
<div class="modal-body">
<p>Are you sure that you want to <strong>Delete</strong> this user ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-primary">Delete</button>
</div>
</div>
</

Answer 1

You do not need to generate a modal for each users. Just build a single modal and use data- attributes for dynamic parts.
So, as minimal, use data- attribute for every button, e.g.
data-user-id="{{ }}" to use in form action:
<i class="icon-trash3"></i>
In the modal window use a form with delete method:
<form id="deleteUserForm" method="POST">
{{ method_field("DELETE") }}
<button class="btn btn-danger" type="submit">DELETE</button>
</form>
In script use:
<script>
$('#deleteUserForm').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
$('#deleteUserForm').attr('action', '/user/' + button.data('user-id'));
});
</script>
In route use:
Route::delete('/user/{user}', 'UserController#destroy');
P.S. You may also use other data attributes ti use dynamically e.g. data-user-name="{{ }}" to show the user's name will be deleted.

Answer 2

Ok, I have used this method below to make it work but that will need to make a modal for each delete button so i don't think this is a good solution for backend may have more than 1k users or even 200k users so i want this to work when the modal outside the loop ?
#foreach ($users as $user)
<tr>
<th scope="row">{{ $loop->index + 1 }}</th>
<td>{{ $user->fullname }}</td>
<td>{{ $user->username }}</td>
<td>{{ $user->email }}</td>
<td>
#foreach( $roles as $role ) {{ $user->role_id == $role->id ? $role->name : ''}} #endforeach
</td>
<td>
<a href="{{ route('dUseInfo', [$user->id]) }}">
<button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-settings2"></i></button>
</a>
<button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm" data-toggle="modal" data-target="#iconModal-{{ $user->id }}"><i class="icon-trash3"></i></button>
<!-- Modal -->
<div class="modal fade text-xs-left" id="iconModal-{{ $user->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" 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" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
</div>
<div class="modal-body">
<p>Are you sure that you want to <strong>Delete</strong> this user ?</p>
</div>
<div class="modal-footer">
{!! Form::open(['route' => ['deleteUser', $user->id], 'class' => 'delete', 'method' => 'DELETE']) !!}
<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline-primary">Delete</button>
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</td>
</tr>
#endforeach