I believe that best way would be explaining both the front end and back end, so will go in a bit depth.
- First you have to make a route in your Web.php file.
- In your blade file add the below code and change the action attribute to your route location whether you can achieve it by going through route or simply through URL.
Remember don't forget to pass your own route
<form method="POST" action="{{route('reports.destroy', $dummy->id)}}">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-danger delete-user">
Delete {{-- you can add your icon here if you want --}}
</button> </form>
In the above code, we made the button for the delete and passed: route to our controller in which we have the "delete function".
Now
You need to add the below link into your page head tag.
{{-- links for pop up alert --}}
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{{-- links for pop up alert --}}
Now add the below code of jQuery.
<script type="text/javascript">
$('.delete-user').click(function(e){
e.preventDefault();
Swal.fire({
title: 'Are you sure?',
text: "You want to delete record",
icon: 'warning',
showCancelButton: true,
timer: 4000,
timerProgressBar: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$(e.target).closest('form').submit() // Post the surrounding form
}
})
});
</script>
You are done, now let me explain the above code: it is getting the class reference named as "delete-user" of your button and when you click on it, the handle will go to your jQuery code and then you can execute it.
