Flask中点击第二个表单按钮时读取第一个表单数据的方法

当提交表单时，只有该表单内部的输入字段数据会被发送到服务器。你的第二个表单createFile中没有包含day、month、year这三个输入项，所以后端无法从request.form中获取到这些值。

方案一：服务器端会话存储（Session） #

通过将第一个表单的数值存入服务器会话，在提交第二个表单时从会话中读取数据。

1. 更新Flask配置 #

先设置会话密钥（必须步骤）：

from flask import Flask, request, redirect, session

app = Flask(__name__)
app.secret_key = "your_secret_key_here"  # 替换为任意随机字符串

2. 处理第一个表单的提交 #

修改/loadData路由，将数据存入会话：

@app.route("/loadData", methods=["POST"])
def loadData():
    session["day"] = request.form.get("day")
    session["month"] = request.form.get("month")
    session["year"] = request.form.get("year")
    return redirect("/")

3. 修改第二个表单的处理逻辑 #

从会话中读取存储的日期数据：

@app.route("/createFile", methods=["POST"])
def createFile():
    if request.method == "POST":
        day = session.get("day")
        month = session.get("month")
        year = session.get("year")
        # 此处添加创建文件的逻辑
    return redirect("/")

方案二：客户端隐藏字段 + JavaScript #

在第二个表单中添加隐藏输入框，通过JavaScript同步第一个表单的输入值。

1. 修改第二个表单代码 #

添加三个隐藏输入字段：

<form id="createFile" method="post" action="/createFile">
    <input type="hidden" id="hidden_day" name="day">
    <input type="hidden" id="hidden_month" name="month">
    <input type="hidden" id="hidden_year" name="year">
    <button type="submit">Create</button>
</form>

2. 添加JavaScript同步逻辑 #

在页面中加入脚本，实时同步输入值：

<script>
// 获取输入元素
const dayInput = document.getElementById("day");
const monthInput = document.getElementById("month");
const yearInput = document.getElementById("year");
const hiddenDay = document.getElementById("hidden_day");
const hiddenMonth = document.getElementById("hidden_month");
const hiddenYear = document.getElementById("hidden_year");

// 实时同步输入值
dayInput.addEventListener("input", () => hiddenDay.value = dayInput.value);
monthInput.addEventListener("input", () => hiddenMonth.value = monthInput.value);
yearInput.addEventListener("input", () => hiddenYear.value = yearInput.value);

// 页面加载时同步预填充数据
window.addEventListener("load", () => {
    hiddenDay.value = dayInput.value;
    hiddenMonth.value = monthInput.value;
    hiddenYear.value = yearInput.value;
});
</script>

3. 后端代码调整 #

保持原逻辑，但改用get()避免键不存在报错：

@app.route("/createFile", methods=["POST"])
def createFile():
    if request.method == "POST":
        day = request.form.get("day")
        month = request.form.get("month")
        year = request.form.get("year")
        # 此处添加创建文件的逻辑
    return redirect("/")

方案三：合并两个表单 #

如果不需要分开两个表单，直接将所有输入项和提交按钮合并到一个表单中：

<form id="combinedForm" method="post" action="/createFile">
    {% if day %}
        Day: <input id="day" name="day" size="5px" value={{day}}>
        Month: <input id="month" name="month" size="5px" value={{month}}>
        Year: <input id="year" name="year" size="5px" value={{year}}>
    {% else %}
        Day: <input id="day" name="day" size="5px">
        Month: <input id="month" name="month" size="5px">
        Year: <input id="year" name="year" size="5px">
    {% endif %}
    <!-- 原第一个表单的其他内容 -->
    <button type="submit">Create</button>
</form>

此时后端只需处理/createFile路由即可获取所有数据。

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