Flask-WTForms:动态创建 name 和 id 属性

约翰尼·梅茨

我的表单允许用户为特定数量的篮球队输入特定数量的名称。这些数字不断更新,所以我需要创建一个动态表单。

假设我有以下 Flask 视图:

@app.route('/dynamic', methods=['GET', 'POST'])
def dynamic():
    teams = ['Warriors', 'Cavs']
    name_count = 2
    return render_template('dynamic.html', teams=teams, name_count=name_count)

以及 HTML 模板中的以下表单dynamic.html

<form method='POST' action='/dynamic'>
  {% for team_index in range(teams | count) %}
    {% for name_index in range(name_count) %}
      <input type="text"
             class="form-control"
             id="team{{ team_index }}_name{{ name_index }}"
             name="team{{ team_index }}_name{{ name_index }}">
    {% endfor %}
  {% endfor %}
<form>

产生以下形式:

<form method='POST' action='/dynamic'>
  <input type="text" class="form-control" id="team0_name0" name="team0_name0">
  <input type="text" class="form-control" id="team0_name1" name="team0_name1">
  <input type="text" class="form-control" id="team1_name0" name="team1_name0">
  <input type="text" class="form-control" id="team1_name1" name="team1_name1">
<form>

我喜欢Flask-WTF库,所以我想知道如何使用它(或只是wtforms)来呈现这个表单。我不确定这是否可行,因为 wtforms 要求每个输入都有一个硬编码的字段名称。

约翰尼·梅茨

想通了这一点。我需要使用 WTFormsFieldlistFormField附件。

class PlayerForm(FlaskForm):
    player = Fieldlist(StringField('Player'))

class TeamForm(FlaskForm):
    team = Fieldlist(FormField(PlayerForm))

@app.route('/dynamic', methods=['GET', 'POST'])
def dynamic():
    teams = ['Warriors', 'Cavs']
    name_count = 2
    # Build dictionary to prepopulate form
    prepop_data = {'team': [{'player': ['' for p in range(name_count)]} for team in teams]}
    # Initialize form
    form = TeamForm(data=prepop_data)
    return render_template('dynamic.html', form=form)

并通过 jinja2(id以及name第一个字段 = 上的属性team-0-player-0解包

<form method="POST" action="/dynamic">
  {{ form.csrf_token }}
  {% for team in form.team %}
    {{ team.csrf_token }}
    {% for player in team.player %}
      {{ render_field(player) }}
    {% endfor %}
  {% endfor %}
</form>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何根据flask和flask-sqlalchemy的动态属性使用wtforms SelectField?

Flask / Python / WTForms 验证和动态设置 SelectField 选项

HTML中id和name属性之间的区别

Razor foreach在呈现的HTML中将属性/变量名放在id,name和* for属性中

Flask-TypeError:__init __()缺少2个必需的位置参数:“ name”和“ user_id”

用flask,wtforms和jinja2设置子表单动态列表的问题

在不同的表单之间重用Name和ID属性是否可以接受?

MVC 4 for jQuery中的id和name属性之间有区别吗?

返回对象内所有数组的 name 和 id 属性值

动态选择WTForms Flask SelectField

XPage CSS 和 id 属性

CSS ID和属性顺序

Flask WTForms:DataRequired和InputRequired之间的区别

Flask-WTForms和隐藏字段

Flask WTForms和for循环生成字段

删除动态添加的行后,减少行 ID 和 Input ID & input Name

带Flask,Flask-Admin和WTforms的DatePickerWidget

从动态创建的div获取data-id属性

使用输入属性 (id, name) 为文本类型的每个输入创建一个标签

MVC Razor帮助程序无法为接口派生类的字段呈现正确的ID和Name属性

一起使用 for 和 name 属性

XSL筛选器属性和Name()

flask wtforms_alchemy对象没有属性

如何提取使用Selenium和Java表元素的ID属性的动态值

SQL Server按ID和动态数据透视/转置属性分组

如何将optionValue动态附加到输入ID和属性的标签?

使用 docker-compose 创建的 Flask 和 Bokeh 容器之间的通信失败并显示 ERR_NAME_NOT_RESOLVED

使用jQuery删除和添加属性ID

通过ID和CSS属性选择元素