表单提交后关闭浏览器异常：窗口关闭但表单未提交的问题求助

问题原因 #

你当前的代码里，调用$(this).closest('form').submit()后立刻执行window.close()，浏览器还没来得及完成表单请求的发送就被关闭，直接导致提交中断。同时，按钮本身是type="submit"，点击时会触发默认的表单提交行为，和jQuery中的submit()调用形成冲突，进一步加剧了提交失败的概率。

解决方案 #

方案1：使用AJAX提交表单（推荐） #

通过AJAX异步提交表单，确保提交成功后再关闭窗口，同时阻止按钮的默认提交行为：

$('.cancel-confirm').on('click', function (e) {
    // 阻止按钮默认的提交动作
    e.preventDefault();
    
    var $form = $(this).closest('form');
    // 异步提交表单数据
    $.ajax({
        url: $form.attr('action'),
        method: $form.attr('method'),
        data: $form.serialize(),
        success: function() {
            alert('Submitted - your window will now close');
            window.close();
        },
        error: function() {
            alert('提交失败，请重试');
        }
    });
});

方案2：监听表单提交完成事件（适用于同步提交场景） #

如果需要保持同步表单提交，可以在服务器端处理完成后，返回的页面中添加自动关闭窗口的脚本，或者修改前端代码通过延迟确保提交完成后再关闭：

$('.cancel-confirm').on('click', function (e) {
    e.preventDefault();
    var $form = $(this).closest('form');
    
    // 设置延迟关闭，适配不同网络环境的提交耗时
    $form.on('submit', function() {
        setTimeout(function() {
            window.close();
        }, 500);
    });
    
    $form.submit();
    alert('Submitted - your window will now close');
});

注意：这种方案依赖延迟，可靠性不如AJAX方案，仅作为备选。

额外优化 #

可以将按钮的type="submit"改为type="button"，彻底避免默认提交行为的干扰：

<button class="btn ff f-22 background-transparant foreground-black cancel-confirm" type="button"> 
    @(item.IsCancelled == true ? "Genaktiver" : "Deaktiver") 
</button>

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