How to get dynamic fields with Flask?

Question

I'am trying to build a web app that can dynamically get more fields

The app is for getting a hamburger shop orders so there would be orders of lets say 1 hamburger or 7 hamburgers, I tried some code I found out but i having troubles to process the data of the orders and save them into a date base

{% extends "layout.html" %}

{% block title %}
    Comander {% endblock %}

{% block main %} <form class="/comander" method="post">

<head>   <meta charset="utf-6">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head>

<!--Hasta arriva del panel--> <div class="container">   <div class="panel panel-default">
    <div class="panel-heading">Burgers</div>
    <div class="panel-body">

        <div class="input-group control-group after-add-more">


<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="formule" name="formule">
        <option value="" disabled selected>Formule</option>
        <option value="1">Classique</option>
        <option value="2">Big</option>
        <option value="3">Veggie</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="fromage" name="fromage">
        <option value="" disabled selected>Fromage</option>
        <option value="1">Chedar</option>
        <option value="2">Tomme</option>
        <option value="3">Blue</option>
        <option value="4">Chevre</option>
        <option value="5">Cantal</option>
        <option value="6">Reblochon</option>
        <option value="7">Maroille</option>
        <option value="8">Sans Fromage</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="cuisson" name="cuisson">
        <option value="" disabled selected>Cuisson</option>
        <option value="1">Blue</option>
        <option value="2">Seignan</option>
        <option value="3">A poit</option>
        <option value="4">Bien Cuit</option>
      </select>
    </div>   </div> </div>


<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="e_c" value="1" id="e_c">   <label class="form-check-label" for="defaultCheck1">Extra Chedar</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_b" value="1" id="e_b">   <label class="form-check-label" for="defaultCheck1">Extra Bacon</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_a" value="1" id="e_a">   <label class="form-check-label" for="defaultCheck1">Extra Autre</label> </div>

    </div>   </div> </div>


<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="s_o" value="1" id="s_o">   <label class="form-check-label" for="defaultCheck1">S/Oni</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sal" value="1" id="s_sal">   <label class="form-check-label" for="defaultCheck1">S/Sal</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_c" value="1" id="s_c">   <label class="form-check-label" for="defaultCheck1">S/Cor</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sau" value="1" id="s_sau">   <label class="form-check-label" for="defaultCheck1">S/Sau</label> </div>

    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">   <div class="input-group">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i>Remove</button>
      </div>   </div> </div>


</div>



<!-- Copy Fields --> <div class="copy hide"> <hr>

    <div class="control-group input-group">

<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="formule" name="formule">
        <option value="" disabled selected>Formule</option>
        <option value="1">Classique</option>
        <option value="2">Big</option>
        <option value="3">Veggie</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary"id="fromage" name="fromage">
        <option value="" disabled selected>Fromage</option>
        <option value="1">Chedar</option>
        <option value="2">Tomme</option>
        <option value="3">Blue</option>
        <option value="4">Chevre</option>
        <option value="5">Cantal</option>
        <option value="6">Reblochon</option>
        <option value="7">Maroille</option>
        <option value="8">Sans Fromage</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">
    <div class="input-group">
      <select class="mdb-select md-form colorful-select dropdown-primary" id="cuisson" name="cuisson">
        <option value="" disabled selected>Cuisson</option>
        <option value="1">Blue</option>
        <option value="2">Seignan</option>
        <option value="3">A poit</option>
        <option value="4">Bien Cuit</option>
      </select>
    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="e_c" value="1" id="e_c">   <label class="form-check-label" for="defaultCheck1">Extra Chedar</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_b" value="1" id="e_b">   <label class="form-check-label" for="defaultCheck1">Extra Bacon</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="e_a" value="1" id="e_a">   <label class="form-check-label" for="defaultCheck1">Extra Autre</label> </div>

    </div>   </div> </div>

<div class="col-sm-2 nopadding">   <div class="form-group">
    <div class="input-group">

<div class="form-check">   <input class="form-check-input" type="checkbox" name="s_o" value="1" id="s_o">   <label class="form-check-label" for="defaultCheck1">S/Oni</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sal" value="1" id="s_sal">   <label class="form-check-label" for="defaultCheck1">S/Sal</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_c" value="1" id="s_c">   <label class="form-check-label" for="defaultCheck1">S/Cor</label> </div> <div class="form-check">   <input class="form-check-input" type="checkbox" name="s_sau" value="1" id="s_sau">   <label class="form-check-label" for="defaultCheck1">S/Sau</label> </div>

    </div>   </div> </div>

<div class="col-sm-1 nopadding">   <div class="form-group">   <div class="input-group">
      <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i>Remove</button>
      </div>   </div> </div>

      </div>

</div>

  </div> </div>

<script type="text/javascript">
    $(document).ready(function() {

      $(".add-more").click(function(){
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });

      $("body").on("click",".remove",function(){
          $(this).parents(".control-group").remove();
      });

    }); </script>

      <div class="input-group-btn">
            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i>Ajouter</button>
            <button class="btn btn-primary" type="submit"> Confirmer</button>
      </div>

</form> {% endblock %}

What would be the best way to allow the users to set as many burgers they want? I read a little about Flask-WTF but I not sure if that would help in this particular problem and I running out of time for get into a dead end.

Thanks for your answers Stack overflow community.

score 3 · Answer 1 · answered Jun 07 '19 at 04:22

I could not run the template you shared as it requires layout.html and necessary libraries.

Here is an example of creating dynamic text fields using jQuery and getting the values in Flask app.

Let's create a form that can add products dynamically. Later, show the dynamic form values after form submission.

Directory Structure

├───app.py
├───templates
│   ├───form.html

File contents

app.py:

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)    

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        return jsonify(request.form)
    return render_template("form.html")

form.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Dynamic Form Example</title>
        <script
                src="https://code.jquery.com/jquery-1.12.4.min.js"
                integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
                crossorigin="anonymous"></script>
    </head>
    <body>
        Products:
        <form action="/" method="post">
            <div id="products"></div>
            <button id="add_item" type="button">Add item</button>
            <input type="submit" value="Submit">
        </form>
        <script>
            $(document).ready(function(){
                var count_item = 0;
                $("#add_item").on("click", function(){
                    count_item += 1;
                    $("<input/>").attr({ type: "text", placeholder: "Enter product name",
                        name: "item_"+count_item}).appendTo("#products").wrap($("<div/>"));
                });
            })
        </script>
    </body>
</html>

Output

Generated dynamic form elements using jQuery:

Display submitted values:

Installed packages

Click==7.0
Flask==1.0.3
itsdangerous==1.1.0
Jinja2==2.10.1
MarkupSafe==1.1.1
Werkzeug==0.15.4

Running the application

set FLASK_APP=app.py
set FLASK_ENV=development
flask run

Replace set with export if you are not using Windows operating system.

Thanks a lot Arsho, that's exactly what I want to do, I'll take your code as reference to carry on with my codding, cheers man! — Jcgo3003, Jun 07 '19 at 17:25
One question, What should I do if I would like to have a select element instead of input element $("").attr({ type: "text", placeholder: "Enter product name", name: "item_"+count_item}).appendTo("#products").wrap($("
")); — Jcgo3003, Jun 07 '19 at 19:18
Do you want to add options in select element? Or new Select element with predefined options? — arshovon, Jun 08 '19 at 12:00
Yes, I want to add options in a select element just like my html document, I tried but I have to say that I am a newbie in JS, really thank you for your help — Jcgo3003, Jun 08 '19 at 14:30
I found multiple Questions-Answers in Stackoverflow regarding "add option to select using jQuery". Here is an existing answer for that: https://stackoverflow.com/a/2162574/3129414 I am glad that my example helped you :) — arshovon, Jun 08 '19 at 16:40
Yes, your side it's simple and clear just how I want to keep it since I don't know if my project will be accepted or not, thank you I will take a look to the link later cheers — Jcgo3003, Jun 08 '19 at 17:08
@AhmedurRahmanShovon what if you have a dynamic `select option` field set `attr` to `multiple` — Azhar Uddin Sheikh, Aug 22 '22 at 14:06

How to get dynamic fields with Flask?

1 Answers1