Laravel 9中JavaScript删除确认对话框异常问题求助

云原生阿岚

2026-7-2

删除确认对话框失效问题的解决思路

问题根源

按钮为type="submit"，点击后无论JS逻辑如何，都会默认触发表单的POST提交，导致确认对话框形同虚设。
JS函数中使用window.location.href发起GET请求，但你的路由配置的是POST方法，两者不匹配；同时函数内的id变量未定义，会引发报错。

修正方案

方案一：通过返回值控制表单提交

修改JS函数，让它返回确认结果，同时在按钮的onclick事件中返回该结果，以此阻止默认提交行为：

修改后的JavaScript代码

function confirmerSuppression() {
    var confirmation = confirm("Êtes-vous sûr de vouloir supprimer cet élément ?");
    if (!confirmation) {
        alert("Suppression annulée !");
    }
    // 返回确认结果，true则提交表单，false则阻止提交
    return confirmation;
}

修改后的删除按钮代码

注意补上原代码中缺失的引号，并在onclick中添加return：

<form action="{{route('tiers.destroy', $tiers->id)}}" method="POST">
@csrf  
<button onclick="return confirmerSuppression()" class="btn btn-danger w-100" type="submit">DELETE</button>                                 
</form>

方案二：改用按钮触发表单提交

将按钮类型改为button，避免默认提交，在确认通过后手动提交表单：

修改后的JavaScript代码

function confirmerSuppression(form) {
    var confirmation = confirm("Êtes-vous sûr de vouloir supprimer cet élément ?");
    if (confirmation) {
        // 确认后提交传入的表单
        form.submit();
    } else {
        alert("Suppression annulée !");
    }
}

修改后的删除按钮代码

<form action="{{route('tiers.destroy', $tiers->id)}}" method="POST">
@csrf  
<button onclick="confirmerSuppression(this.form)" class="btn btn-danger w-100" type="button">DELETE</button>                                 
</form>