Modal delete confirmation Laravel

Brijpal Sharma
laravel html css   Publish on:-November 27th, 2018 , Category:- Web Development


In this post, we learn how to show a modal delete confirmation in 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.

 


Brijpal Sharma

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...


6 Comments

Generic placeholder image

Philip
Publish on:-January 25th, 2020
Hi, this was really helpful to me. Thanks a lot!

Generic placeholder image

Brijpal Sharma
Publish on:-January 29th, 2020
Welcome! Philip

Generic placeholder image

Hameed
Publish on:-February 12th, 2020
Hi, It is deleting the data but that is wrong.. Can you please help me to find out the reason. when I delete the last record, it is deleting the first record Thanks

Generic placeholder image

Matovu Joel
Publish on:-May 15th, 2020
Hello! How best can i create a Modal Edit with that kind of script or code? please elaborate

Generic placeholder image

Hendi Santika
Publish on:-August 10th, 2020
Hello, nice sample. But, I have followed your code. But It still error when I click the delete button: `Uncaught SyntaxError: Invalid or unexpected token' Any suggestion? Thanks

Generic placeholder image

Hendi Santika
Publish on:-August 10th, 2020
I always got this error: Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST. //localhost:8000/user

You must be logged in to post a comment.