Flask WTForms 动态添加表单字段

Question

我正在努力将表单字段动态添加到我的网站，然后我可以使用 Flask 从中获取数据。

我的页面如下所示：

请注意，我目前使用 JavaScript 添加 HTML 代码。

function addDataField(x) {
   if (x == 'container_kenntnisse') {
      let id_increment = document.getElementById('container_kenntnisse').childElementCount;    
      document.getElementById(x).insertAdjacentHTML('beforeend', '<div id="datafield_kenntnisse' + id_increment + '"><input class="float-start data-input-field multiple-line double-input" id="data_kenntnisse' + id_increment + '" name="data_kenntnisse' + id_increment + '" placeholder="Tool / Skill" type="text" value=""><select class="float-end titel-dropdown data-input-field multiple-line double-input" id="data_kenntnisse_niveau' + id_increment + '" name="data_kenntnisse_niveau' + id_increment + '" ><option selected="" value="Bitte auswählen...">Bitte auswählen...</option><option value="Grundkenntnisse">Grundkenntnisse</option><option value="Gute Kenntnisse">Gute Kenntnisse</option><option value="Professionelle Kenntnisse">Professionelle Kenntnisse</option></select></div>');
   }
}

如果我现在单击蓝色按钮，它将如下所示：

这是该部分的 HTML 容器。它位于一个更大的形状内。

<div id="container_kenntnisse" class="data-container">
   <div id="datafield_kenntnisse0">
      <input class="float-start data-input-field multiple-line double-input" id="data_kenntnisse" name="data_kenntnisse" placeholder="Tool / Skill" type="text" value="">
      <select class="float-end titel-dropdown data-input-field multiple-line double-input" id="data_kenntnisse_niveau" name="data_kenntnisse_niveau"><option selected="" value="Bitte auswählen...">Bitte auswählen...</option><option value="Grundkenntnisse">Grundkenntnisse</option><option value="Gute Kenntnisse">Gute Kenntnisse</option><option value="Professionelle Kenntnisse">Professionelle Kenntnisse</option></select>
   </div>
   <div id="datafield_kenntnisse1">
      <input class="float-start data-input-field multiple-line double-input" id="data_kenntnisse1" name="data_kenntnisse1" placeholder="Tool / Skill" type="text" value="">
      <select class="float-end titel-dropdown data-input-field multiple-line double-input" id="data_kenntnisse_niveau1" name="data_kenntnisse_niveau1"><option selected="" value="Bitte auswählen...">Bitte auswählen...</option><option value="Grundkenntnisse">Grundkenntnisse</option><option value="Gute Kenntnisse">Gute Kenntnisse</option><option value="Professionelle Kenntnisse">Professionelle Kenntnisse</option></select>
   </div>
</div>
<button class="btn btn-primary float-end small-button data-input-button" type="button" onclick="addDataField(&#39;container_kenntnisse&#39;)">Weitere Kenntnis hinzufügen<i class="fas fa-plus"></i></button>

我目前正在以纯 HTML 形式附加新字段。 我的 WTForms 看起来像这样：

data_kenntnisse = StringField('data_kenntnisse', render_kw={'placeholder': 'Tool / Skill'})
data_kenntnisse_niveau = SelectField('data_kenntnisse_niveau', choices=[('Bitte auswählen...', 'Bitte auswählen...'), ('Grundkenntnisse', 'Grundkenntnisse'), ('Gute Kenntnisse', 'Gute Kenntnisse'), ('Professionelle Kenntnisse', 'Professionelle Kenntnisse')])

我的任何数据模型都只有两个字段：

data_kenntnisse = db.Column(db.String(255))
data_kenntnisse_niveau = db.Column(db.String(255))

有没有办法动态添加表单字段，以便我可以用 Flask 读取添加的表单字段？

Answer 1

不需要给div设置id

将输入字段的名称设置为 data_kenntnisse[]

然后从 Flask 中，您可以捕获它并将其存储为数组字段，并通过索引访问每个元素

您可以参考下面关于如何使用 html 和 javascript 动态添加表单字段的文章

https://medium.com/@srivishnu.k90/add-dynamic-form-fields-with-html-and-pure-javascript-in-2-minutes-c4950e0a1717