Flask表单如何仅点击指定按钮跳转并传递所有选中产品值列表

问题核心原因 #

现有代码将循环内的产品按钮全部设置为submit类型，点击任意产品按钮都会直接触发表单提交跳转，且每次提交仅会传递当前点击按钮的参数，无法累计选中的产品。

修改方案 #

1. 调整index.html代码

将产品按钮改为普通按钮，新增隐藏域存储选中的产品列表，绑定点击事件累计选中值，仅保留外层按钮为提交触发器：

<form action="{{ url_for('show_products') }}" method="post">
  <!-- 新增隐藏域存储选中产品 -->
  <input type="hidden" name="selected_products" id="selected_products" value="">
  <ul class="list-group">
   {% for p in products %}
    <!-- 改为普通button，添加点击事件切换选中状态 -->
    <button type="button" class="product-btn" data-value="{{p}}">{{p}}</button>
    {% endfor %}
  </ul> 
  <button type="submit" class="btn btn-primary">点击该按钮触发跳转</button>
</form>

<script>
// 存储已选中的产品集合
const selected = new Set();
const selectedInput = document.getElementById('selected_products');
document.querySelectorAll('.product-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const val = btn.dataset.value;
    if(selected.has(val)){
      selected.delete(val);
      btn.style.backgroundColor = ''; // 取消选中样式还原
    }else{
      selected.add(val);
      btn.style.backgroundColor = '#e0e0e0'; // 选中后加灰底标识
    }
    // 同步更新隐藏域的值，用逗号分隔
    selectedInput.value = Array.from(selected).join(',');
  })
})
</script>

2. 调整app.py代码

接收隐藏域传递的选中值，拆分处理为列表后传给模板：

@app.route('/show_products', methods=["POST", "GET"])
def show_products():
    prod_data = {}
    selected_list = []
    if request.method == "POST":
        selected_str = request.form.get('selected_products', '')
        if selected_str:
            # 按逗号拆分字符串为列表，过滤空值
            selected_list = [p for p in selected_str.split(',') if p.strip()]
    prod_data['p_name'] = selected_list
    return render_template('show_products.html', **prod_data)

3. 调整show_products.html代码

遍历列表展示所有选中的产品：

<h1>Hi</h1>
{% if p_name %}
  <p>你选中的产品有：</p>
  <ul>
    {% for product in p_name %}
      <li>{{ product }}</li>
    {% endfor %}
  </ul>
{% else %}
  <p>未选择任何产品</p>
{% endif %}

修改完成后，点击产品按钮只会切换选中状态不会跳转，只有点击外层提交按钮才会提交所有选中的产品列表到后端渲染展示。

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