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">×</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
Philip
Publish on:-January 25th, 2020
Hi, this was really helpful to me. Thanks a lot!
Brijpal Sharma
Publish on:-January 29th, 2020
Welcome! Philip
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
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
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
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.