Я не смог запустить шаблон, которым вы поделились, так как он требует 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
Замените set на export, если вы не используетеОперационная система Windows.