我甜蜜的 alert2 按鈕都在提交刪除表單

Question

讓我先說我不明白 javascript 或 ajax 所以我嘗試遵循幾個代碼以便在確認刪除預訂之前彈出警報但即使我按下取消預訂也會被刪除或即使我在隨機位置按下表單，也提交了表單，並且由於我不太了解代碼，我無法檢測到問題，有人可以告訴我我應該解決什么

這是我的js代碼：

    <!-- SweetAlert2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.2.0/sweetalert2.all.min.js"></script>

    <script>
    function confirmDelete(item_id) {
        swal({
            title: "Attention!",
            text: "Êtes-vous sûr de vouloir annuler votre réservation?",
            type: "warning",
            buttons: true,
            showCancelButton: !0,
            confirmButtonColor: '#FFC61A',
            confirmButtonText: "Oui!",
            cancelButtonText: "Annuler",
            dangerMode: true,
            reverseButtons: !0
        })
            .then((willDelete) => {
                if (willDelete) {
                    $('#delete-company').submit();

                }else {
                    swal("Cancelled Successfully");
                }
            });
    }

這是我的按鈕和表格

    <td>
                                <form id="delete-company" action="{{ url('reservations/'.$r->id) }}" method="post">
                                    {{csrf_field()}}
                                    {{method_field('delete')}}
                                    <button type="button" class="btn  btn-black-bordered btn-xs" onclick="confirmDelete('delete-company')"><i class="fa fa-trash"></i></button>
                                </form>
                                
                            </td>

和我的 controller

    public function destroy(Reservation $reservation)
{
    try {
        Reservation::where('id',$reservation->id)->delete();
        
        Alert::success('Succès', 'La réservation a été annulée avec succès')->autoClose(false);
        return back();
        
    } catch (Exception $e) {
        return back()->withError('Une erreur est survenue, veuillez réessayer ultérieurement')->withInput();    
    }
}
    

嘗試一些建議后更新我的代碼

   <form id="{{'delete-company-'.$r->id}}" action="{{ url('reservations/'.$r->id) }}" method="post">
                                    {{csrf_field()}}
                                    {{method_field('delete')}}
                                </form>
                                 <button type="button" class="btn btn-black-bordered btn-xs" onclick="confirmDelete('{{$r->id}}')">
                                    <i class="fa fa-trash"></i>
                                 </button>

這是我的新腳本

    <script>
    function confirmDelete(item_id) {
        swal({
            title: "Attention!",
            text: "Êtes-vous sûr de vouloir annuler votre réservation?",
            type: "warning",
            buttons: true,
            showCancelButton: !0,
            confirmButtonColor: '#FFC61A',
            confirmButtonText: "Oui!",
            cancelButtonText: "Annuler",
            dangerMode: true,
            reverseButtons: !0
        })
            .then((willDelete) => {
                if (willDelete) {
                    $('#delete-company-'+item_id).submit();
              

                }else {
                    swal("Cancelled Successfully");
                }
            });
    }
    </script>

還是， 該框正在顯示，但無論何時我仍然提交表單

Answer 1

在提交過程中出現警報時，我通常將觸發按鈕移到表單之外。 一般來說，我什至沒有表格。 我使用按鈕觸發 SWAL。 SWAL問我要不要做點什么，然后我用ajax將數據推送到服務器。

如果您想提交表單而不使用 ajax，我建議您將按鈕移到表單外，然后像您的問題一樣使用 JS 提交。

在沒有表單的情況下執行此操作（刪除表單，只需獲取 ID）可能是最干凈的：

 function confirmDelete(item_id) {
    swal({
        title: "Attention!",
        text: "Êtes-vous sûr de vouloir annuler votre réservation?",
        type: "warning",
        buttons: true,
        showCancelButton: !0,
        confirmButtonColor: '#FFC61A',
        confirmButtonText: "Oui!",
        cancelButtonText: "Annuler",
        dangerMode: true,
        reverseButtons: !0
    })
        .then((willDelete) => {
            if (willDelete) {
                // AJAX here - push the id to your delete method

            }else {
                swal("Cancelled Successfully");
            }
        });
}

另外-您不會顯示這是否是循環表單，但是如果您循環使用，請注意不要一遍又一遍地使用相同的表單 ID / 名稱。