创建可变数量的 Flask-WTF 表单或使用一个提交按钮提交多个表单

Question

我完全是自学成才，所以如果我的代码一团糟，我深表歉意。我正在尝试创建一个完整的堆栈规划工具。

工作将进入并显示在网页上，如下面的快照所示。Website snippit

我希望用户能够输入设备可用的日期并点击提交，这样我就可以获取该信息并通过电子邮件自动将其发送给计划者。

我遇到了以下问题：我似乎不能让一个提交按钮同时提交多个表单，这意味着我必须制作多个表单。如果我必须制作多个表格，则必须在我遍历作业列表时生成它们，因为作业列表的大小是可变的。最重要的是，我需要在点击每个提交按钮时存储信息。

这是我的python代码

from flask import Flask, render_template, url_for, redirect, request
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, DateField, TextAreaField
from wtforms.validators import DataRequired, Email
from flask_bootstrap import Bootstrap
from WO_Gatherer import WoHandler
import random

work_orders = WoHandler()

liquids_jobs, ss_jobs, line_116_jobs,lyo_jobs = work_orders.room_and_department()


login_key = '1234'


class MyForm(FlaskForm):
    email = StringField(label='Email', validators=[DataRequired(), Email()])
    password = PasswordField(label='Login Key', validators=[DataRequired()])
    submit = SubmitField(label='Log In')

class PmcForm(FlaskForm):
    date = DateField(label='Date')
    comment = TextAreaField(label='Comment')
    submit = SubmitField(label='Submit')


app = Flask(__name__)
Bootstrap(app)
app.secret_key = "some-secret-string"


@app.route('/', methods=['GET'])
def home():
    login_form = MyForm()
    return render_template('index.html', form=login_form)


@app.route('/<department>', methods=['POST'])
def pmc(department):
    global login_key
    global liquids_jobs, ss_jobs, line_116_jobs, lyo_jobs
    form = PmcForm()
    if department == 'liquids':
        job_packet = liquids_jobs
    elif department == 'SS':
        job_packet = ss_jobs
    elif department == 'L116':
        job_packet = line_116_jobs
    elif department == 'Lyo':
        job_packet = lyo_jobs
    data = {
        'email': request.form['email'],
        'key': request.form['password']
    }
    if data['key'] == login_key:
        return render_template(f'{department}.html', jobs=job_packet, form=form)
    else:
        return '<h1>Incorrect Login Key</h1>'


@app.route('/success', methods=['POST'])
def success():
    data = {
        'Dates': request.form['date'],
        'Comments': request.form['comment']
    }
    return f'<h1>Response successfully submitted! Thank you.{data}</h1>'


if __name__ == '__main__':
    app.run(debug=True)

以及我的 pmc 页面示例

    {% include 'header.html' %}

<section class='header {% block color %}{% endblock %}'>
  <img class="card-img-top header-icon" src="static/images/{% block image %}{% endblock %}.svg" alt="Card image cap">
    <h1 class="header-text">{% block title %}{% endblock %} Production Maintenance Coordination</h1>
</section>

<section class='pmc-table'>
  <table class="table">
          <thead class="thead-dark">
            <tr>
                <th scope="col">WO Number</th>
                <th scope="col">Description</th>
                <th scope="col">Rooms</th>
                <th scope="col">Impact</th>
                <th scope="col">Est Comp Time</th>
                <th scope="col">Input Form</th>
            </tr>
          </thead>
          <tbody>
          {% block content %}{% endblock %}
          </tbody>
  </table>

    <div class="submit-button">
        <form action="{{ url_for('success') }}" method="POST">{% block button %}{% endblock %}</form>
    </div>

</section>




{% include 'footer.html' %}

以及在片段示例中呈现的页面

    {% extends 'pmc.html' %}

{% block color %}blue{% endblock %}
{% block image %}liquids{% endblock %}
{% block title %}Liquids{% endblock %}

{% block content %}
    {% for job in jobs %}
            <tr>
              <th scope="row">{{ job[0] }}</th>
              <td>{{ job[1] }}</td>
              <td>{% for room in job[5] %}{{ room + '\n'}}{% endfor %}</td>
              <td>{{ job[2] }}</td>
              <td>{{ job[3] }}</td>
              <td>Date: <br> {{ form.date }} <br> Comments: <br> {{ form.comment }}</td>
            </tr>
          {% endfor %}
{% endblock %}

{% block button %}{{ form.submit }}{% endblock %}

Answer 1

是的，您可以这样做。您正在 WTForms 中寻找 Field Enclosures。 将 FieldList 和 FormField 添加到您的 wtforms 导入中，然后：

class PmcFields(FlaskForm):
    date = DateField(label='Date')
    comment = TextAreaField(label='Comment')
class PmcForm(FlaskForm):
    pmc_fields = FieldList(FormField(PmcFields))
    submit = SubmitField(label='Submit')

然后在您的pmc(department) 路由中，为作业包设置值后：

form = PmcForm()
for job in job_packet:
    form.pmc_fields.append_entry(PmcFields())