Django测试应用倒计时自动提交表单，提交空表单无用户输入值

1. 提交流程被手动跳转强制中断 #

这是导致提交空表单的最主要原因，你当前的提交逻辑存在流程冲突：

• 正常调用document.getElementById("myForm").submit()后，浏览器会自动按照表单预设的action="{% url 'acceptAnswer' %}"、method="POST"规则，收集表单内所有带name属性的输入值，打包成POST请求发送到目标地址，自动完成页面跳转。
• 但你在触发提交后立刻执行了window.location.href = "http://127.0.0.1:8000/acceptAnswer"，这个操作会直接打断正在进行的POST表单提交流程：浏览器会优先执行同步的手动导航指令，发起一次不带任何POST表单数据的GET请求跳转到目标地址，等页面跳走后，原本的表单提交已经被中断，服务端收到的自然就是没有任何用户输入的空请求。
• 你表单本身已经配置了正确的提交地址，手动设置跳转的逻辑完全多余，还会直接起反作用。

2. 存在潜在的DOM结构问题 #

你在循环渲染每道题的选项时，所有单选框的id属性都是固定的1、2、3、4，多道题渲染后会出现大量重复id。虽然这个问题不会直接导致表单传值失败（表单收集数据只识别name属性），但会导致DOM元素定位逻辑异常，后续如果要加题目选中状态校验很容易出故障。

第一步：修正提交逻辑 #

删掉submitform里多余的手动跳转代码，同时增加防重复提交标记，避免倒计时到点的几毫秒内反复触发提交请求：

// 全局标记防止重复提交
let isSubmitted = false;
function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;
    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 100 && !isSubmitted ) {
            // 标记已经触发提交，避免重复调用
            isSubmitted = true;
            // 只保留表单提交动作，不需要手动跳转
            document.getElementById("myForm").submit();
        } else if (msLeft >= 100) {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}
countdown( "ten-countdown", 1, 0 );

第二步：修正重复id的DOM问题 #

把循环渲染的单选框id改成和题目唯一键绑定的形式，保证页面内没有重复id：

<form id="myForm" action="{% url 'acceptAnswer' %}" method="POST">
    {% csrf_token %}
    {% for key, value in questions.items %} 
    {{key}}){{value.question}}
    <br>
    <input type="radio" id="q_{{key}}_1" name="{{key}}" value="1">:{{value.option1}}<br>
    <input type="radio" id="q_{{key}}_2" name="{{key}}" value="2">:{{value.option2}}<br>
    <input type="radio" id="q_{{key}}_3" name="{{key}}" value="3">:{{value.option3}}<br>
    <input type="radio" id="q_{{key}}_4" name="{{key}}" value="4">:{{value.option4}}<br>
    {% endfor %}
    <input type="submit" value="submit">
</form>

修改完成后可以打开浏览器开发者工具，切换到「网络」面板，等待倒计时结束触发提交时，观察跳转请求：

• 确认请求方法是POST，不是GET
• 确认请求携带的Form Data里包含你手动选中的所有题目选项值、以及CSRF Token
• 服务端在acceptAnswer视图里可以通过request.POST正常取到所有提交的答案值

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