Django实现未提交表单退出提醒，避免提交时触发提示

问题分析 #

当前的beforeunload事件监听会在所有页面卸载场景（包括表单提交）触发警告，需要区分用户主动提交表单和未提交就离开两种情况，同时还要判断表单是否真的被修改过，避免无修改时弹出不必要的提示。

解决方案 #

通过两个状态变量区分场景，修改JavaScript逻辑：

• isSubmitting：标记用户是否正在提交表单
• formChanged：标记表单内容是否被修改

修改后的JS代码 #

<script type="text/javascript">
    let isSubmitting = false;
    let formChanged = false;

    // 监听表单提交事件，标记为正在提交
    document.querySelector('form[name="fullForm"]').addEventListener('submit', function() {
        isSubmitting = true;
    });

    // 监听表单内所有输入元素的变化，标记表单已修改
    const formElements = document.querySelectorAll('form[name="fullForm"] input');
    formElements.forEach(element => {
        element.addEventListener('change', function() {
            formChanged = true;
        });
    });

    // 页面卸载前的判断逻辑
    window.addEventListener('beforeunload', function(e) {
        // 只有表单已修改且不是正在提交时，才弹出警告
        if (formChanged && !isSubmitting) {
            e.preventDefault();
            e.returnValue = '你有未保存的修改，确定要离开吗？';
        }
        // 否则不做处理，浏览器正常执行卸载/提交
    });
</script>

代码说明 #

1. 表单提交标记：当用户点击「Save Attendance」提交按钮时，submit事件触发，将isSubmitting设为true，此时beforeunload会跳过警告逻辑。
2. 表单修改检测：监听表单内所有单选框、输入框的change事件，只要用户修改了任何内容，就把formChanged设为true，确保只有真的有修改时才触发警告。
3. 卸载前判断：在beforeunload事件里，只有同时满足「表单已修改」和「不是提交操作」两个条件时，才弹出离开警告。

注意事项 #

• 你的HTML表单已有name="fullForm"属性，JS可直接通过该属性选择表单，无需额外修改HTML结构。
• 提示文本e.returnValue可根据需求自定义，不同浏览器可能会统一处理提示文案，但核心逻辑不受影响。

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