Flask接收Bootstrap自定义select表单提交值为空问题求助

核心问题原因 #

• 下拉选择框<select>标签未设置name属性：浏览器提交表单时，只会将带有name属性的表单控件值加入POST请求的表单数据中，缺少该属性的select值不会被传递到后端。
• 后端取值逻辑错误：当前代码request.form['newPOTM']实际取的是提交按钮的name对应值，并非下拉框选中的球员名称。

修复步骤 #

1. 修改HTML的select标签，添加name属性 #

<!-- 给select新增name属性，属性名自定义即可，后续后端要和这个名称对应 -->
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect" name="selected_player">
  <option selected>Choose...</option>
  {% for rows in dropdown %}
  <option value="{{ rows.Name }}">{{ rows.Name }}</option>
  {% endfor %}
</select>

2. 修改Flask后端取值逻辑 #

@app.route("/addPOTM",methods=["POST","GET"])
def addPOTM():
    conn = get_db_connection()
    if request.method == 'POST':
        # 按select的name属性取值，用get方法可以避免未选择时抛出异常
        selected_name = request.form.get('selected_player')
        print(selected_name)
    return redirect(url_for('potm'))

额外优化建议 #

如果需要避免用户直接点提交（选择默认的Choose...选项）拿到无效值，可以给默认option加空value，后端加判断：

<option selected value="">Choose...</option>

后端判断逻辑：

if request.method == 'POST':
    selected_name = request.form.get('selected_player')
    if selected_name:
        # 执行后续入库等逻辑
        print(selected_name)
    else:
        # 可以搭配flash组件提示用户选择球员
        flash('请先选择要添加的球员')

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