我的甜蜜警报 2 按钮都在提交删除表单

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>

和我的控制器

    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/名称。