problem to pass id when i use delete confirmation in laravel 5.8

Question

I am trying to use sweet alert to ask for delete confirmation but its not working.

We have a list of items, when we want to delete each one of them, the id of the first one is pass to the controller.

If I remove event.preventDefault(); it works correctly but the delete confirmation is not shown any more!

Route:

Route::POST('/delete_class', 'ClassController@delete_class')->name('class.delete'); 

Form:

<form method="post" id="myform" action="{{route('class.delete')}}">
   @csrf
   <input type="hidden" name="classroom_id" value="{{$class->id}}">
   <button onclick="c()" id="confirm_delete" class="btn btn-lg btn-block  btn-danger">
       Delete
   </button>
</form>

Controller:

public function delete_class(Request $request)
{
    //dd($request->toArray());
    Classroom::where('id', $request->classroom_id)->delete();
    return redirect()->route('dashboard');
}

Script:

<script>
    function c() {
        var form = document.getElementById('myform');
        event.preventDefault();
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        })
        swalWithBootstrapButtons.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
            reverseButtons: true
        }).then((result) => {
            if (result.value) {
                form.submit();
                swalWithBootstrapButtons.fire(
                    'Deleted!',
                    'Your Class has been deleted.',
                    'success'
                )
            }
            else if (result.dismiss === Swal.DismissReason.cancel) {
                swalWithBootstrapButtons.fire(
                    'Cancelled',
                    'Your Class is safe :)',
                    'error'
                )
            }
        })
    }
</script>

Please help.

Answer 1

    <form method="post" action="/delete">
        @csrf
        <input type="hidden" name="classroom_id" value="{{$class->id}}">
        <button onclick="c()" class="btn btn-lg btn-block  btn-danger">
            Delete
        </button>
    </form>

    <script>
        function c() {
            var form = event.srcElement.closest('form');
            event.preventDefault();
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'btn btn-success',
                    cancelButton: 'btn btn-danger'
                },
                buttonsStyling: false
            })
            swalWithBootstrapButtons.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    form.submit();
                    swalWithBootstrapButtons.fire(
                        'Deleted!',
                        'Your Class has been deleted.',
                        'success'
                    )
                }
                else if (result.dismiss === Swal.DismissReason.cancel) {
                    swalWithBootstrapButtons.fire(
                        'Cancelled',
                        'Your Class is safe :)',
                        'error'
                    )
                }
            })
        }
    </script>