Confirm delete using swal on laravel 5.8 - php

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

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.
}
});
});

Answer 2

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>