Flask WTForms dynamically add form fields

I'm struggling with adding form fields dynamically to my website from which I can then get the data with Flask.

My Page looks like this:

Note that I currently add the HTML Code with JavaScript.

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>');
   }
}

If I now click on the blue button it will look like this:

This is the HTML container for that section. It is inside a larger form.

<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>

I am currently appending the new fields as pure HTML. My WTForms look like this:

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')])

Any my data model only has the two fields:

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

Is there a way to dynamically add the form fields, so that I can read the added form fields with Flask?

Flask WTForms dynamically add form fields

0 Answers