Modal delete confirmation Laravel

Generic placeholder image
Brijpal Sharma
laravel html css  

Date:-November 27th, 2018 , Posted On:- 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 pass id of the item which we want to delete.

<a href="javascript:;" data-toggle="modal" onclick="deleteData({{$value->id}})" 
data-target="#DeleteModal" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> Delete</a>

 

Add bootstrap modal

add bootstrap modal for popup confirmation.

  <div id="DeleteModal" class="modal fade text-danger" role="dialog">
   <div class="modal-dialog ">
     <!-- Modal content-->
     <form action="" id="deleteForm" method="post">
         <div class="modal-content">
             <div class="modal-header bg-danger">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title text-center">DELETE CONFIRMATION</h4>
             </div>
             <div class="modal-body">
                 {{ csrf_field() }}
                 {{ method_field('DELETE') }}
                 <p class="text-center">Are You Sure Want To Delete ?</p>
             </div>
             <div class="modal-footer">
                 <center>
                     <button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>
                     <button type="submit" name="" class="btn btn-danger" data-dismiss="modal" onclick="formSubmit()">Yes, Delete</button>
                 </center>
             </div>
         </div>
     </form>
   </div>
  </div>

In this modal, we use a confirmation button to delete or cancel for the item. when the user chooses one of them.  a function called.

  <script type="text/javascript">
     function deleteData(id)
     {
         var id = id;
         var url = '{{ route("item.destroy", ":id") }}';
         url = url.replace(':id', id);
         $("#deleteForm").attr('action', url);
     }

     function formSubmit()
     {
         $("#deleteForm").submit();
     }
  </script>

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

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

 


About the author

user profile
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...

0 comments

You must be logged in to post a comment.