如何正确使用SweetAlert/Swal？表单提交弹窗逻辑异常求助

你的代码有两个核心问题：一是没阻止表单的默认提交行为，表单会直接按原生逻辑提交；二是jQuery.getScript和swal都是异步操作，代码不会等待用户完成弹窗交互就继续执行，导致弹窗只是“顺带”显示，完全不影响表单提交流程。

jQuery("#some_exchnage_request_form").on('submit', function(e) {
    // 第一步：强制阻止表单默认提交行为，这是核心
    e.preventDefault();
    const $form = jQuery(this);

    // 先检查swal是否已加载，避免重复请求脚本
    if (typeof swal === 'undefined') {
        jQuery.getScript('https://unpkg.com/sweetalert/dist/sweetalert.min.js', function() {
            showConfirmDialog($form);
        });
    } else {
        showConfirmDialog($form);
    }

    // 封装弹窗逻辑，方便复用
    function showConfirmDialog(form) {
        swal({
            title: "是否继续？",
            text: "您需要支付额外费用",
            icon: "success",
            buttons: true,
            confirmButtonColor: '#C64EB2',
        }).then((willSubmit) => {
            if (willSubmit) {
                // 用户确认，手动触发表单提交
                form.submit();
                // 如果原来的"rest of the code"是提交前的逻辑，要放在这里执行
            } else {
                // 用户取消，可选择添加提示或直接终止流程
                swal("已取消操作");
            }
        });
    }
});

• e.preventDefault()：必须先调用这个方法，彻底阻断表单的原生提交流程，把控制权交给弹窗逻辑
• 异步操作处理：getScript的回调确保脚本加载完成后才调用swal；swal的then回调会在用户点击按钮后才执行，保证等待用户选择
• 避免重复加载：通过typeof swal === 'undefined'判断脚本是否已加载，防止多次提交时重复请求资源
• 手动提交表单：用户确认后，调用form.submit()触发表单提交，此时才会执行表单的原生提交逻辑

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