Flask表单确认弹窗问题：点击取消仍提交表单如何解决？

这不是Flask的特性，完全是前端JavaScript处理表单默认提交行为的问题。你的按钮默认是submit类型，点击时会触发浏览器自带的表单提交动作，这个动作不受你JS函数里的逻辑影响——哪怕你取消了确认，默认提交还是会执行，导致/delete接口被调用。

修复方案 #

方案一：通过返回值阻止默认提交 #

修改HTML和JS代码，利用return阻止默认行为，同时使用传入的表单对象：

HTML代码：

<form action="/delete" method="post">
    <button id="deleteForm" class="btn btn-danger" onclick="return deleteConfirm(this.form)">Delete</button>
</form>

JS代码：

function deleteConfirm(form) {
    let text = "Are you sure?\nOk=Delete all data.";
    if (confirm(text)) {
        form.submit();
        return true;
    } else {
        alert("Cancelled.");
        return false;
    }
}

方案二：将按钮改为普通按钮 #

把按钮类型设为button，避免默认提交行为，手动控制表单提交：

HTML代码：

<form action="/delete" method="post" id="deleteForm">
    <button type="button" class="btn btn-danger" onclick="deleteConfirm()">Delete</button>
</form>

JS代码：

function deleteConfirm() {
    let text = "Are you sure?\nOk=Delete all data.";
    if (confirm(text)) {
        document.getElementById("deleteForm").submit();
    } else {
        alert("Cancelled.");
    }
}

方案三：使用事件监听（推荐） #

分离HTML与JS逻辑，通过表单的submit事件监听来控制：

HTML代码：

<form action="/delete" method="post" id="deleteForm">
    <button class="btn btn-danger">Delete</button>
</form>

JS代码：

document.getElementById('deleteForm').addEventListener('submit', function(e) {
    let text = "Are you sure?\nOk=Delete all data.";
    if (!confirm(text)) {
        e.preventDefault();
        alert("Cancelled.");
    }
});

内容的提问来源于stack exchange，提问作者Hawshemi