我甜蜜的 alert2 按钮都在提交删除表单

如何解决我甜蜜的 alert2 按钮都在提交删除表单

让我先声明我不理解 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!",reverseButtons: !0
        })
            .then((willDelete) => {
                if (willDelete) {
                    $('#delete-company-'+item_id).submit();
              

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

仍然，

该框正在显示，但我仍然提交表单的地方

解决方法

在提交过程中出现警告时，我通常将触发按钮移到表单外。通常我什至没有表格。我使用按钮来触发 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/名称。