Flask创建考试表单提交时class_id显示为undefined的问题排查求助

我现在在开发一个基于Flask的校园hub应用，老师可以在上面创建考试，但遇到了一个头疼的问题：提交表单时，class_id在Flask端收到的是"undefined"，完全不符合预期。

问题现象 #

提交表单后，Flask的日志里显示：

DEBUG - Raw Form Data: {'title': '1', 'class_id': 'undefined', 'description': '1'}
ERROR - Validation failed: Invalid or missing class_id

明明表单里的class_id字段不管是通过Jinja从后端预加载，还是用JavaScript动态拉取数据生成选项，提交后在Flask的request.form里却总是显示"undefined"。

Flask的create_exam路由代码 #

@main.route('/create_exam', methods=['POST'])
@login_required
def create_exam():
    if current_user.role != 'teacher':
        return jsonify({'error': 'Unauthorized'}), 403

    logger.debug(f"Raw Form Data: {dict(request.form)}")

    title = request.form.get('title')
    class_id = request.form.get('class_id')
    description = request.form.get('description')

    logger.debug(f"Received Exam Data - Title: {title}, Class ID: {class_id}, Description: {description}")

    if not class_id or class_id.strip().lower() in ["undefined", "null", "none", ""]:
        logger.error(f"Validation failed: Invalid or missing class_id. Received: {class_id}")
        return jsonify({'error': 'A valid class ID is required'}), 400

    try:
        class_id = int(class_id)
    except ValueError:
        return jsonify({'error': 'Class ID must be a valid number'}), 400

    class_entry = Class.query.get(class_id)
    if not class_entry:
        return jsonify({'error': 'Invalid class or unauthorized access'}), 403

    try:
        exam = Exam(title=title, class_id=class_id, description=description, teacher_id=current_user.id)
        db.session.add(exam)
        db.session.commit()
        return jsonify({'message': 'Exam created successfully'}), 201
    except Exception as e:
        db.session.rollback()
        return jsonify({'error': 'Failed to create exam'}), 500

HTML表单代码 #

<form id="exam-form" action="/create_exam" method="POST">
    <div class="mb-3">
        <label for="title" class="form-label">Exam Title</label>
        <input type="text" class="form-control" id="title" name="title" required>
    </div>
    
    <div class="mb-3">
        <label for="class_id" class="form-label">Select Class</label>
        <select class="form-control" id="class_id" name="class_id" required>
            {% if class_codes %}
                <option value="" disabled selected>Select a class</option>
                {% for class_code in class_codes %}
                    <option value="{{ class_code.id }}">{{ class_code.code }}</option>
                {% endfor %}
            {% else %}
                <option disabled>No class codes available</option>
            {% endif %}
        </select>
    </div>

    <button type="submit" class="btn btn-primary">Create Exam</button>
</form>

JavaScript代码（获取班级代码和提交调试） #

document.addEventListener("DOMContentLoaded", function () {
    const classSelect = document.getElementById("class_id");

    fetch("/get_class_codes")
        .then(response => response.json())
        .then(data => {
            console.log("[DEBUG] Received class codes:", data);

            if (classSelect.options.length <= 1) { 
                classSelect.innerHTML = ""; // Clear only if Jinja hasn't preloaded

                let defaultOption = document.createElement("option");
                defaultOption.value = "";
                defaultOption.disabled = true;
                defaultOption.selected = true;
                defaultOption.textContent = "Select a class";
                classSelect.appendChild(defaultOption);

                data.forEach(classCode => {
                    let option = document.createElement("option");
                    option.value = classCode.id;
                    option.textContent = classCode.code;
                    classSelect.appendChild(option);
                });
            }
        })
        .catch(error => console.error("[DEBUG] Error fetching class codes:", error));
});

// Debugging Form Submission
document.getElementById("exam-form").addEventListener("submit", function (event) {
    let classSelect = document.getElementById("class_id");
    console.log("[DEBUG] Selected class ID:", classSelect.value);

    if (!classSelect.value || classSelect.value === "undefined") {
        event.preventDefault();
        alert("Please select a valid class.");
    }
});

我已经做过的排查步骤 #

• 提交前打印document.getElementById("class_id").value，控制台显示的是正确的班级ID
• 查看Flask的request.form输出，确实收到的是"undefined"
• 手动选择下拉选项后再提交，Flask端还是收到"undefined"
• 用fetch("/get_class_codes")生成下拉选项，选项显示正确，但提交后依然传了undefined

预期结果 #

• 选中的class_id应该正确传递到Flask，是有效的整数
• request.form.get("class_id")应该返回选中的班级ID，而不是"undefined"

我的疑问 #

• 为什么class_id会被传成"undefined"？
• 会不会是JavaScript代码干扰了表单的正常提交？
• 有没有更好的方法在Flask里调试表单数据？

备注：内容来源于stack exchange，提问作者user29725694