Confirm delete using swal on laravel 5.8

Question

I got some troubles when using swal to confirm delete, I do not know how to make it work

here is my blade view file:

<form action="{{ route('user.destroy', $us->id)}}" method="post">
        @method('DELETE')
        @csrf
        <input class="btn btn-danger" type="submit" value="Delete" />
</form>

and the script using swal

  <script>
        //== Class definition
        var SweetAlert2Demo = function() {

            //== Demos
            var initDemos = function() {
                $('.btn-danger').click(function(e) {
                    e.preventDefault();
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        buttons:{
                            confirm: {
                                text : 'Yes, delete it!',
                                className : 'btn btn-success'
                            },
                            cancel: {
                                visible: true,
                                className: 'btn btn-danger'
                            }
                        }
                    }).then((Delete) => {
                        if (!Delete) {
                           e.preventDefault();
                        }
                    });
                });
            };

            return {
                //== Init
                init: function() {
                    initDemos();
                },
            };
        }();

        //== Class Initialization
        jQuery(document).ready(function() {
            SweetAlert2Demo.init();
        });
    </script>

the version of swal is https://sweetalert.js.org not https://sweetalert2.github.io/

And I'm using route resource on laravel 5.8 thanks you!

Answer 1

Use GET method instead of POST. And no need to use button or combine anything. Try this example,which always works with my all projects. As Use anchor tag, Not button

<a class="btn btn-action text-danger" title="Delete" data-toggle="tooltip" onclick="deletefunction({{$your_id}})"><i class="fa fa-trash"></i></a>

Add Script As,

<script>
var deletefunction = function(id){
        swal({ 
            title: "Are you sure you want to Delete this?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes",
            closeOnConfirm: false,
            preConfirm: function(result) {
                window.location.href = '{{url('/your_route/delete')}}/'+id;
            },
            allowOutsideClick: false
        });
    };
</script>

Answer 2

Update in case of Loops

You should give an id to your form and then in the swal callback submit the form by using the ID

<form action="{{ route('user.destroy', $us->id)}}" method="post" id="yourFormId">

Your JS Click button is almost same. Just some small change in the Swal JS Callback Method

        $('.btn-danger').click(function(e) {
                var $form =  $(this).closest("form"); //Get the form here.
                e.preventDefault();
                   swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        buttons:{
                            confirm: {
                                text : 'Yes, delete it!',
                                className : 'btn btn-success'
                            },
                            cancel: {
                                visible: true,
                                className: 'btn btn-danger'
                            }
                        }
                    }).then((Delete) => {
                        console.log(Delete); //This will be true when delete is clicked
                        if (Delete) {
                           $form.submit(); //Submit your Form Here. 
                           //$('#yourFormId').submit(); //Use same Form Id to submit the Form.
                        }
                    });
        });