JQuery POST请求未发送问题：点击触发SweetAlert表单提交异常

让我帮你排查这个表单提交失败的问题，核心原因主要有两个：

1. 触发弹窗的按钮类型干扰 #

你的#manage按钮设置了type="submit"，但它并不属于任何表单。虽然部分浏览器不会对独立的submit按钮触发页面提交，但这个多余的类型设置可能会干扰后续事件逻辑——点击按钮时，浏览器会尝试触发默认提交行为，即使你绑定了弹出SweetAlert的事件，这个潜在的默认行为也可能导致后续表单提交异常。

2. 动态表单的提交事件被SweetAlert拦截 #

当你点击按钮动态生成SweetAlert弹窗时，弹窗内的表单是动态插入DOM的，SweetAlert的弹窗容器会拦截表单的submit事件。另外，你的弹窗同时存在SweetAlert自带的Confirm按钮和表单自己的Set提交按钮，两者的事件逻辑会冲突：点击表单的Set按钮时，SweetAlert会优先触发弹窗关闭逻辑，直接中断表单的正常提交流程。

修复方案 #

我提供两种可行的修复方式，你可以根据需求选择：

方式一：修正按钮类型并确保表单事件正常执行 #

首先把#manage按钮的类型改为button，消除默认提交行为的干扰；然后给动态生成的表单绑定submit事件，确保提交逻辑不被拦截：

<script> 
$(document).ready(function() { 
    $('#manage').click(function() {
        swal({ 
            title: 'Choose your settings', 
            type: 'info', 
            html:"<form method='post' id='set'>{% csrf_token %}<input type='text' class='set-pref' placeholder='Enter your preference' name='input_val'><button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='submit'>Set</button></form>", 
            showCloseButton: false, 
            showCancelButton: false, 
            focusConfirm: false, 
            confirmButtonText: 'Confirm', 
            cancelButtonText: 'Go forward', 
            allowOutsideClick: false
        }); 
        
        // 给动态表单绑定submit事件，确保提交逻辑生效
        $(document).on('submit', '#set', function() {
            // 保留表单默认提交行为，如需AJAX提交可在此修改逻辑
        });
    }); 
}); 
</script>
<button name="button" id="manage" type="button" class="btn btn-danger btn-sm f-14 mr-1">manage</button>

方式二：用SweetAlert预确认钩子处理提交（推荐） #

这种方式更贴合SweetAlert的交互逻辑，去掉表单内的提交按钮，改用SweetAlert自带的确认按钮触发提交，通过AJAX发送请求，页面不会刷新：

<script> 
$(document).ready(function() { 
    $('#manage').click(function(e) {
        e.preventDefault(); // 阻止任何潜在的默认行为
        swal({ 
            title: 'Choose your settings', 
            type: 'info', 
            html:"<form method='post' id='set'>{% csrf_token %}<input type='text' class='set-pref' placeholder='Enter your preference' name='input_val'></form>", 
            showCloseButton: false, 
            showCancelButton: false, 
            focusConfirm: false, 
            confirmButtonText: 'Set', 
            // 预确认钩子：点击确认按钮时执行提交逻辑
            preConfirm: function() {
                var formData = $('#set').serialize();
                return $.ajax({
                    url: window.location.href, // 替换为你的实际提交URL
                    type: 'POST',
                    data: formData,
                    dataType: 'json'
                }).catch(function(error) {
                    swal.showValidationMessage('提交失败：' + error.responseText);
                });
            }
        }).then(function(result) {
            // 提交成功后的反馈
            if (result.value) {
                swal('成功！', '设置已保存', 'success');
            }
        });
    }); 
}); 
</script>
<button name="button" id="manage" type="button" class="btn btn-danger btn-sm f-14 mr-1">manage</button>

这种方式完全整合了SweetAlert的交互，避免了事件冲突，还能提供更友好的成功/失败反馈。

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