如何通过Flask获取HTML动态生成的TextBox内容并打印到命令行？

我看了你的代码，问题主要出在HTML表单结构缺失、动态生成的input没有name属性，以及Flask端获取数据的方式不对这几个地方，下面一步步帮你修正：

1. 修复HTML和JavaScript代码 #

首先，你的页面缺少<form>标签，提交按钮没有被包裹在表单里，点击后不会发送POST请求；另外动态生成的input没有设置name属性（Flask是通过name来获取表单值的），还有字符串拼接的小错误。修改后的代码如下：

<!DOCTYPE html> 
<html> 
<head> 
</head>
<body> 
<form method="POST" action="/">
  <label>Enter Number of Buildpacks:</label> 
  <select id="mySelect" onChange="onChangeDropdown()"> 
    <option value="">Please Select....</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
    <option value="9">9</option> 
    <option value="10">10</option> 
  </select> 
  <br/> 
  <br/> 
  <div id="demo"> 
  </div> 
  <input type="submit" value="Submit" > 
</form>
</body> 
</html> 
<script> 
function onChangeDropdown(){ 
  var slctdValue = parseInt(document.getElementById("mySelect").value); 
  document.getElementById('demo').innerHTML = buildTextboxes(slctdValue); 
} 
function buildTextboxes(num){ 
  var html = ""; 
  for (var i=0; i < num; i++){ 
    // 给每个input添加唯一id和name属性，name用数组形式方便批量获取
    html += `<br/><div><label>Buildpack Name ${i+1}:</label><input type="text" id="textbox${i}" name="buildpacks[]"></div>`; 
  } 
  return html; 
} 
</script>

关键修改点： #

• 添加了<form method="POST" action="/">包裹所有表单元素，确保点击提交时发送POST请求到Flask的根路由
• 动态生成input时添加了name="buildpacks[]"，这样所有输入值会以数组形式提交
• 修正了id的拼接错误（原来的写法会变成id="textbox"0这种错误格式，现在是id="textbox0"）

2. 修复Flask代码 #

你的Flask路由有重复（两个@app.route('/')），而且获取数据的方式不对，还有redirect里的e变量未定义。修改后的代码如下：

import os
from flask import Flask, request, render_template, redirect 

port = 8080 
if 'PORT' in os.environ: 
    port = int(os.getenv("PORT")) 

app = Flask(__name__) 

@app.route('/', methods=['GET', 'POST']) 
def index(): 
    if request.method == 'POST': 
        try: 
            # 通过getlist获取所有buildpacks数组的值
            buildpacks = request.form.getlist('buildpacks[]') 
            # 过滤掉空值（如果有的话）
            buildpacks = [bp.strip() for bp in buildpacks if bp.strip()]
            print("提交的Buildpack内容：", buildpacks) 
        except Exception as ex: 
            print(f"Unexpected error: {str(ex)}") 
        # 提交后重定向回首页
        return redirect('/')
    # GET请求时返回页面
    return render_template('TestUI.html') 

if __name__=="__main__": 
    app.run(host='0.0.0.0', port=port, debug=True)

关键修改点： #

• 合并了路由，用一个@app.route('/', methods=['GET', 'POST'])处理两种请求
• 使用request.form.getlist('buildpacks[]')一次性获取所有动态生成的input值，返回一个列表，比逐个获取更简洁
• 修复了redirect的错误，现在提交后重定向回首页
• 添加了debug模式方便开发调试（上线时可以关闭）

现在测试一下：选择数字生成对应数量的TextBox，输入内容后点击提交，Flask控制台就会打印出所有输入的内容了。

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