Laravel, call Delete with JavaScript

Question

I'm still a beginner with Laravel. I wanted to do the usual "are you sure you want to delete this" question as a modal. I'm trying to do it with JS, and I have the following function that I found on this very website.

function confirmClick(){
            let url = "{{route('comics.destroy', ':id') }}";
            url = url.replace(':id', idComic);
            window.location.href = url;
        }; 

But when I use this what I get is the show route. This is what I have in my Controller

public function destroy($id)
    {
        $comic = Comic::findOrFail($id);
        $comic->delete();

        return redirect()->route('comics.index');
    }

And the html

<div class="hidden" id="deleteModal">
      <h2>Sei sicuro di volerlo eliminare?</h2>
        <button type="submit" class="btn btn-danger" id="yesBtn">Sì</button>
      <button type="submit" class="btn btn-info" id="noBtn">No</button>
    </div>

Do i have to add in some way a method and the token? In case I have to, how do I do this? Sorry if this might look confusing, but it comes from a really confused mind at the moment lol

Answer 1

I suggest you use a different approach, mostly because Laravel's default route for DELETE requieres a POST.

This is a code I use very often. You have a form with the method and token, and a button with a class "deletebutton".

If you click the button, it triggers the "confirmation" from this library https://bootstrap-confirmation.js.org/. You can use another library, or use your own implementation returning a true/false value to evaluate and then decide if you submit the form or not.

if the user confirms, it looks for the form and then triggers the "submit"

   <form class="form_delete"  action="/record/{{ $record->id }}" method="POST">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
    <button type="button" class="btn btn-sm btn-danger deletebutton"><i class="fa fa-trash"></i>
    </button>
</form>


<script>
    $(document).ready(function () {
        $('.deletebutton').confirmation({
            rootSelector: this,
            container: 'body',
            popout: true,
            placement: 'top',
            singleton: true,
            onCancel: function () {
            },
            onConfirm: function (value) {
                var myform = $(this).closest(".form_delete");
                myform.submit();
            }
        });     
    });
</script>