JS动态生成的表单输入字段提交后无法传递到Flask后端如何解决？

DevOps 小满

2026-10-9

问题修复方案

核心问题梳理

1. HTML标签嵌套错误，原有form未正确包裹提交按钮和动态生成的输入框，同时JS额外新建了独立form，导致输入字段不属于提交时用的表单，后端无法收到参数
1. session存在性判断逻辑错误，原有写法无法正确判断两个值都存在于session中
1. results路由直接返回文本内容，和你编写的results.html模板逻辑不匹配

修复后的代码

1. inputNum.html

<form action="{{ url_for("inputNum")}}" method="post">
  <button id="btn"> Add new fields </button>
  <div id="ip_div"></div>
  <br>
  <button type="submit">Submit for addition </button>
</form>
<script type=text/javascript src="{{ url_for('static', filename='jquery.js') }}"></script>
<script type=text/javascript src="{{ url_for('static', filename='inputFields.js') }}"></script>

2. inputFields.js

var num = 2; // 一次添加2个输入框

var createInputs = function () {
  // 直接往已有form里加输入框，不要新建form
  for (var i = 0; i < num; i++) {
    $("#ip_div").append("<input></input>");
  }
};

$("#btn").click(function (e) {
  // 阻止按钮默认提交行为（因为按钮在form里）
  e.preventDefault();
  createInputs();
  // 给每个输入框加唯一属性
  $("#ip_div")
    .find("input")
    .each(function (i) {
      $(this).attr("type", "number");
      $(this).attr("name", "num" + i);
      $(this).attr("id", "num" + i);
      $(this).attr("placeholder", "number" + i);
    });
});

3. main.py 调整部分

# 仅需修改results路由的判断和返回逻辑
@app.route('/results')
def results():
    # 修正session判断逻辑
    if "num1" in session and "num2" in session:
        # 如果你需要渲染results.html，就用下面这行，不用直接返回文本
        return render_template('results.html')
        # 如果要保留原来的文本返回逻辑，就保留原有代码即可
    else:
        return redirect(url_for('inputNum'))