Question

我正在尝试构建一个可以动态获取更多字段的网络应用

该应用程序用于获取汉堡店订单，因此会有1个汉堡包或7个汉堡包的订单，我尝试了一些发现的代码，但是我在处理订单数据并将其保存到日期时遇到了麻烦基础

{% 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 %}

允许用户设置任意数量的汉堡的最佳方法是什么？我读了一些有关Flask-WTF的文章，但是我不确定这是否对解决这个特定问题有帮助，而且我已经没有时间花钱了。

感谢您的回答堆栈溢出社区。

Answer 1

我无法运行您共享的模板，因为它需要layout.html和必需的库。

这里是使用jQuery创建动态文本字段并在Flask应用中获取值的示例。

让我们创建一个可以动态添加产品的表单。稍后，在提交表单后显示动态表单值。

目录结构

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

文件内容

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>

输出

使用jQuery生成动态表单元素：

显示提交的值：

已安装的软件包

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

运行应用程序

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

如果不使用Windows操作系统，请用set替换export。

如何使用Flask获取动态字段？

1 个答案: