CODEWITHSUNDEEP
pythonajaxflaskflask-wtforms
viktor
viktor

Reputation: 185

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: enter image description here

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: enter image description here

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?

Upvotes: 1

Views: 381

Answers (1)

srivishnu
srivishnu

Reputation: 123

You don't need to set id for div

set name for input field as data_kenntnisse[]

then from flask you can capture and store it as array field and access each element by its index

you can refer to below article on how to add form fields dynamically with html and javascript

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

Upvotes: 0

Related Questions