Modal delete confirmation Laravel

When the users try to delete some data or row from the table a modal popup for confirmation. with two buttons delete or cancel.

Modal delete confirmation Laravel

create a delete button which is the passed id of the item which we want to delete.

 <a href="javascript:;" data-toggle="modal" data-id='{{$data->id}}' data-target="#exampleModalCenter" >Remove</a>
           

Add bootstrap modal

add bootstrap modal for which is receive id.

<script src=//code.jquery.com/jquery-3.5.1.slim.min.js integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin=anonymous></script>
<script>
  $('.addAttr').click(function() {
  var id = $(this).data('id');   
  $('#id').val(id); 
  } );
 </script>

<!-- Modal -->
<div id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div role="document">
   <div >
   <form action="{{Your route name}}" method="post">
      {{ csrf_field() }}
    <div >
      <button type=button data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div >
      <input type=hidden id="id" name=id>
      <h5 id="exampleModalLabel">Are you sure want to delete?</h5>
    </div>
    <div >
     <button type=button data-dismiss="modal">No</button>
     <button type=submit >Yes ! Delete it</button>
    </div>
  </form>

   </div>
  </div>
 </div>
 <!-- Modal -->

Note

Here I use Jquery CDN to pass the data-id from button to modal and set id to text bot which is a hidden field.

<script  src=//code.jquery.com/jquery-3.5.1.slim.min.js integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin=anonymous></script>
<script>
    $('.addAttr').click(function() {
    var id = $(this).data('id');      
    $('#id').val(id);  
    } );
 </script>

When the user chooses to delete the button of the modal here it will be received and post on the URL with id. If the user selects the back or cancels button modal will close.

So, finally, we learn how to create a Modal delete confirmation Laravel hope this post help you.