同一页面表单参数传递：提交Form2时获取Form1值的方案

需求说明：提交Form1时获取对应表单的值，提交Form2时需同时获取Form1和Form2的输入值。现有代码如下：

现有代码 #

前端Form1代码 #

<form action="send_value1" method="POST">
      Input1: <input type="text" name="input1">
      Input2: <input type="text" name="input2">
      <input type="submit" name="submit" value="submit_form1">
</form>

前端Form2代码 #

<form action="send_value2" method="POST">
      Input3: <input type="text" name="input3">
      Input4: <input type="text" name="input4">
      <input type="submit" name="submit" value="submit_form2">
</form>

后端Flask代码 #

@app.route("/page", methods=["GET", "POST"])
def to_do():
  
    if request.method == "POST":

        if request.form['submit'] == 'submit_form1':

            data1 = request.form['input1']
            data2 = request.form['input2']

        if request.form['submit'] == 'submit_form2':

            data3 = request.form['input3']
            data4 = request.form['input4']

            # 这里需要同时获取Form1的值

可行解决思路 #

方法1：在Form2中添加隐藏字段，实时同步Form1的值 #

通过JavaScript监听Form1输入框的变化，把值实时同步到Form2的隐藏字段里，提交Form2时就能携带Form1的输入值。

修改后的前端代码：

<!-- Form1 -->
<form action="send_value1" method="POST">
      Input1: <input type="text" name="input1" id="input1">
      Input2: <input type="text" name="input2" id="input2">
      <input type="submit" name="submit" value="submit_form1">
</form>

<!-- Form2 -->
<form action="send_value2" method="POST">
      Input3: <input type="text" name="input3">
      Input4: <input type="text" name="input4">
      <!-- 隐藏字段存储Form1的值 -->
      <input type="hidden" name="form1_input1" id="form1_input1">
      <input type="hidden" name="form1_input2" id="form1_input2">
      <input type="submit" name="submit" value="submit_form2">
</form>

<script>
// 监听输入变化，同步值到隐藏字段
document.getElementById('input1').addEventListener('input', function() {
    document.getElementById('form1_input1').value = this.value;
});
document.getElementById('input2').addEventListener('input', function() {
    document.getElementById('form1_input2').value = this.value;
});
</script>

后端Flask修改：

@app.route("/page", methods=["GET", "POST"])
def to_do():
  
    if request.method == "POST":

        if request.form['submit'] == 'submit_form1':
            data1 = request.form['input1']
            data2 = request.form['input2']

        if request.form['submit'] == 'submit_form2':
            data3 = request.form['input3']
            data4 = request.form['input4']
            # 获取Form1同步过来的值
            data1 = request.form.get('form1_input1', '')
            data2 = request.form.get('form1_input2', '')

方法2：用Flask Session存储Form1提交后的值 #

如果业务逻辑要求用户先提交Form1，再提交Form2，可以把Form1的值存入Session，提交Form2时从Session中读取。

后端修改：

# 先配置Session所需的密钥
app.secret_key = 'your_custom_secret_key_here'

@app.route("/page", methods=["GET", "POST"])
def to_do():
  
    if request.method == "POST":

        if request.form['submit'] == 'submit_form1':
            data1 = request.form['input1']
            data2 = request.form['input2']
            # 将值存入Session
            session['input1'] = data1
            session['input2'] = data2

        if request.form['submit'] == 'submit_form2':
            data3 = request.form['input3']
            data4 = request.form['input4']
            # 从Session获取Form1的值
            data1 = session.get('input1', '')
            data2 = session.get('input2', '')

注意：这种方式下，如果用户直接提交Form2，Session中没有Form1的值，会返回空字符串。

方法3：合并两个表单（业务允许时） #

如果业务逻辑允许，直接把两个表单合并成一个，用不同的提交按钮区分操作，这样提交时能一次性获取所有字段的值。

修改后的前端代码：

<form action="/page" method="POST">
      Input1: <input type="text" name="input1">
      Input2: <input type="text" name="input2">
      <br>
      Input3: <input type="text" name="input3">
      Input4: <input type="text" name="input4">
      <br>
      <input type="submit" name="submit" value="submit_form1">
      <input type="submit" name="submit" value="submit_form2">
</form>

后端代码修改：

@app.route("/page", methods=["GET", "POST"])
def to_do():
  
    if request.method == "POST":

        if request.form['submit'] == 'submit_form1':
            data1 = request.form['input1']
            data2 = request.form['input2']
            # 可忽略input3和input4的值

        if request.form['submit'] == 'submit_form2':
            data1 = request.form['input1']
            data2 = request.form['input2']
            data3 = request.form['input3']
            data4 = request.form['input4']

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