CODEWITHSUNDEEP
pythonhtmlformsflaskdynamic
unbutu
unbutu

Reputation: 125

How to get dynamic html table entries in a form to flask?

I am trying to create a form with an embedded table that the user can dynamically add and remove table rows while entering content into the cell inputs.

HTML

<form id="myForm" action="{{ url_for('hello_world') }}" method="POST">
      <div class="form-row text-left">
          <div class="col-1 text-left">
              <input type="checkbox" id="skills" name="skills" value="Yes">
          </div>
          <div class = "col-11 text-left">
              <h2>TECHNICAL SKILLS</h2>
          </div>
      </div><!--form-row-->
      <div class="form-row">
       <table id="myTable" name="skillsTable">
         <tr>
           <th>Category</th>
           <th>Entries</th>
         </tr>
       </table>
   </div><!--form-row-->
   <br>
   <button type="button" onclick="addSkill()">Add Row</button>
   <button type="button" onclick="deleteSkill()">Delete row</button>
   <hr>
    <input type="submit" value="Submit" onclick="submit()" />
</form>

As you can see in the screenshot [![screenshot of the user form][1]][1] the name attribute is correctly being appended to added cell.

The goal is to have a way to get the table values dynamically created by the user over to the flask template where they can be displayed.

Javascript

  <script>

  var c1=0;
  var c2=0;

  function addSkill() {

    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "<input type='text' value=' ' name=cell1_"+c1.toString()+"> ";
    cell2.innerHTML = "<input type='text' value=' ' name=cell2_"+c2.toString()+"> ";
    c1++;
    c2++;      
  }

  function deleteSkill() {
    document.getElementById("myTable").deleteRow(-1);
  }
</script>

I have tried setting the name attribute for each newly created cell using a counter, but this still does not show up rendered in the flask template:

flask

@app.route('/hello_world', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        result = {}    

        try:
            skills = request.form['skills']
            result['skills'] = skills

            result['value'] = request.form['cell1_1']
        except:
            pass
        return render_template("result.html",result = result)

result.html


    {% if result.skills %}

    <p>{{ result.value }}</p>

    {% endif %}

In this example, I would expect to see "Language" show up on rendered after submitting the form if the checkbox is selected. How can I refer to the table in the form from flask and loop through the <input> elements if they are dynamically created? Thx [1]: https://i.sstatic.net/samhG.png

Upvotes: 1

Views: 5382

Answers (1)

unbutu
unbutu

Reputation: 125

result.html


  {% if result.skills %}
    {% set skillsTable = result.skillsTable %}
    <h2>TECHNICAL SKILLS</h2>
    <table>
      {% for skill in skillsTable %}
        {% if loop.index|int % 2 == 0 %}
        <tr><td>{{ skillsTable.pop(0) }}:</td><td>{{ skillsTable.pop(0) }}</td></tr>
        {% else %}
          <tr><td>{{ skillsTable.pop(0) }}:</td><td>{{ skillsTable.pop(0) }}</td></tr>
        {% endif %}
       {% endfor %}
    {% endif %}

flask

@app.route('/hello_world', methods=['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        result = {}
        try:           
            skills = request.form['skills']
            result['skills'] = skills
            result['skillsTable'] = []
            form = request.form
            for key, value in form.items():
                if key.startswith("cell"):
                    result['skillsTable'].append(value)
        except:
            pass

        return render_template("result.html",result = result)

Upvotes: 1

Related Questions