NodeJS/Express/Mongoose下SweetAlert2删除确认表单提交方法

原有实现 #

原本使用浏览器原生confirm弹窗做删除二次确认，通过内联事件的返回值控制表单是否提交，代码如下：

<form id="btn-form" action="/thought/<%- thought._id %>?_method=DELETE" method="POST" onclick="return confirm('Are you sure you wish to delete this thought post?');">
    <button class="btn-none trash-index-page"><i class="far fa-trash-alt"></i></button>
</form>

现存问题 #

计划替换为SweetAlert2自定义弹窗时，原有代码存在两个核心问题：

• 函数第一行写了原生return confirm(...)逻辑，会直接阻断后续SweetAlert2弹窗代码执行
• 没有处理表单默认提交逻辑，也没有在用户确认删除后手动触发表单提交，无法对接原有DELETE接口

原有半成品代码如下：

<form id="btn-form" action="/thought/<%- thought._id %>?_method=DELETE" method="POST" onclick="ConfirmDelete()">
    <button class="btn-none trash-index-page"><i class="far fa-trash-alt"></i></button>
</form> 

function ConfirmDelete() {
    return confirm('Are you sure you wish to delete this record?');
    Swal.fire({
        title: 'Are you sure you wish to delete this record?',
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: 'Yes',
        denyButtonText: 'No',
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire('Record deleted!', '', 'success')
        } else if (result.isDenied) {
            Swal.fire('Record not deleted', '', 'info')
        }
    })
}

修正后可直接运行的代码 #

HTML部分调整 #

<form id="btn-form" action="/thought/<%- thought._id %>?_method=DELETE" method="POST">
    <button type="button" class="btn-none trash-index-page" onclick="ConfirmDelete(event)">
        <i class="far fa-trash-alt"></i>
    </button>
</form>

JS逻辑调整 #

function ConfirmDelete(e) {
    // 阻止默认表单提交行为，等待用户弹窗选择
    e.preventDefault();
    Swal.fire({
        title: '确定要删除这条记录吗？',
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: '确认删除',
        denyButtonText: '取消',
    }).then((result) => {
        if (result.isConfirmed) {
            // 用户确认后手动提交表单，完全兼容原有method-override的DELETE请求逻辑
            document.getElementById('btn-form').submit();
            Swal.fire('删除成功!', '', 'success')
        } else if (result.isDenied) {
            Swal.fire('已取消删除', '', 'info')
        }
    })
}

额外优化提示 #

• 给删除按钮加上type="button"属性，避免部分浏览器下按钮默认触发表单提交
• 如果是列表页有多条删除按钮，不要用固定ID获取表单，可以把表单实例直接传入函数避免ID冲突：

  <button type="button" class="btn-none trash-index-page" onclick="ConfirmDelete(event, this.closest('form'))">
  

  对应JS函数调整为接收form参数，确认时直接调用form.submit()即可
• 该方案不需要修改任何后端接口逻辑，和原来原生confirm的提交行为完全一致

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