如何将Materialize Chips选中的标签数据传递到Flask？

问题根源 #

1. 选择器不匹配：初始化代码中使用.chips-placeholder选择器，但实际容器的class是chips，导致组件未正确绑定到目标元素。
2. Materialize Chips组件不会自动生成表单提交所需的字段，表单提交时没有携带标签数据。

修正后的HTML模板 #

<form action="{{ url_for('add') }}" method="POST" id="pecasForm">
    {{ form.csrf_token }}
       
    <span>{{ form.pecas.label }}</span>
    <div class="chips chips-placeholder"></div>
                                   
    <input type="submit" class="btn btn-success" value="Save">
</form>
            
<script>
    $(document).ready(function() {
        // 正确初始化目标Chips容器
        $('.chips-placeholder').chips({
            placeholder: 'Código da peça',
            secondaryPlaceholder: '+ Peça',
        });

        // 表单提交前，将Chips数据转为隐藏表单字段
        $('#pecasForm').submit(function() {
            // 清除旧的隐藏字段，避免重复提交
            $('input[name="pecas"]').remove();
            
            const chipInstance = M.Chips.getInstance($('.chips-placeholder'));
            const pecasData = chipInstance.chipsData;
            
            // 为每个标签生成一个隐藏input，适配Flask的getlist方法
            pecasData.forEach(chip => {
                $('<input>').attr({
                    type: 'hidden',
                    name: 'pecas',
                    value: chip.tag
                }).appendTo(this);
            });
        });
    });
</script>
         
<script>
     $(document).ready(function(){
     $('select').formSelect();
     });
</script>  

修正后的Flask路由 #

@app.route("/add", methods=['POST', 'GET'])
def add():   
    form = AddDispositivoForm(request.form)
    if request.method == 'POST':                
        pecas = request.form.getlist("pecas")
        print(pecas)  # 现在可正常获取标签数组
                
        return redirect(url_for('index'))
    return render_template("add.html", form=form)

关键改动说明 #

• 统一Chips容器的class与初始化选择器，确保组件正确渲染。
• 新增表单提交事件监听，将Chips的标签数据转为多个name="pecas"的隐藏input字段，让Flask通过getlist方法获取完整的标签数组。
• 移除无效的重复初始化代码，简化逻辑。

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