Flask单按钮提交两个表单时仅获取第二个表单数据问题咨询

你当前代码无法拿到两个表单数据的核心原因是：原生DOM的form.submit()方法会触发页面跳转，浏览器同一时间只能处理一个会触发页面重载的提交请求。你在函数里连续调用两次submit()时，第一次提交f1的请求还未完成传输，就被第二次提交f2的请求直接终止，所以后端永远只能收到最后提交的f2的数据，f1的请求根本没完整发到服务端。

不是必须的，一共有三种可落地的实现方案，新手优先选第一种即可。

方案1：合并为单个表单（最推荐，零额外JS成本） #

这是最符合HTML表单设计逻辑的写法，不需要写自定义JS提交逻辑，实现成本最低：

• 把所有需要提交的输入项放到同一个<form>标签内
• 给不同表单来源的输入框设置不同的name属性（你当前两个输入框都叫name，就算一起提交值也会被覆盖）
• 使用原生的submit类型按钮即可，不需要绑定onclick事件

示例代码：

<!-- 单表单包含所有输入项 -->
<form method="post" action="{{url_for('process')}}">
    <div>表单1输入：<input type="text" name="form1_name"></div>
    <div>表单2输入：<input type="text" name="form2_name"></div>
    <button type="submit">提交</button>
</form>

Flask后端直接读取对应字段即可：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('forms.html')

@app.route('/processing', methods=['POST',"GET"])
def process():
    f1_name = request.form.get('form1_name')
    f2_name = request.form.get('form2_name')
    print(f1_name, f2_name) # 可同时拿到两个输入框的值
    return "processsed"

if __name__ == '__main__':
    app.run(debug=True)

方案2：保留两个独立表单结构，JS合并字段后单次提交 #

如果因为业务逻辑必须保留两个独立的form标签，也不需要发两次请求，只需要在提交前把两个表单的字段合并，只触发一次提交即可。
修改你的提交函数：

function sub(){
    const f1 = document.getElementById("f1");
    const f2 = document.getElementById("f2");
    // 把f2的输入字段克隆后追加到f1，加前缀避免重名冲突
    Array.from(f2.elements).forEach(elem => {
        const clonedElem = elem.cloneNode(true);
        clonedElem.name = `form2_${clonedElem.name}`;
        f1.appendChild(clonedElem);
    })
    // 仅提交一次f1即可携带所有数据
    f1.submit();
}

后端读取逻辑和方案1完全一致，直接读取name（f1的输入值）和form2_name（f2的输入值）即可。

方案3：Ajax异步提交（适合无刷新提交场景） #

如果你不希望提交表单后触发页面跳转，可以选择Ajax方案，核心逻辑是把两个表单的数据合并到同一个FormData对象中，一次性发送给后端，全程不会触发页面重载。
修改提交函数：

async function sub(){
    const mergedFormData = new FormData();
    // 加载f1的字段，加前缀区分来源
    const f1Data = new FormData(document.getElementById("f1"));
    for (const [key, value] of f1Data.entries()) {
        mergedFormData.append(`form1_${key}`, value);
    }
    // 加载f2的字段
    const f2Data = new FormData(document.getElementById("f2"));
    for (const [key, value] of f2Data.entries()) {
        mergedFormData.append(`form2_${key}`, value);
    }
    // 发送异步POST请求
    const response = await fetch("{{url_for('process')}}", {
        method: "POST",
        body: mergedFormData
    })
    const result = await response.text();
    console.log("后端返回结果：", result);
}

该方案下Flask后端不需要做任何特殊修改，和接收普通表单提交的逻辑完全一致。

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