如何根据来自 selectfield 的用户输入在表单中动态创建字段？

Question

如何根据用户在 select 个字段上的输入生成表单字段？

class PracticeForm(FlaskForm):
    number_of_fields = SelectField(u'How many input fields?', choices=[(2, '2'), (3, '3'), (4, '4'), (5, '5'), (6, '6')])

    '''
    dynamically create input fields based on user input of "number_of_fields" here

    fields = number_of_fields (ranging from 2-6) **** StringFields with same attributes
    '''

    submit = SubmitField('Submit')

在我的 routes.py 中，我想将字段保存到列表中：

@app.route("/practice", methods=['GET', 'POST'])
def practice():

    practiceform = PracticeForm()
    user_list = practiceform.fields.data
    if practiceform.validate_on_submit():
        return redirect(url_for('success_page', list=user_list))

我应该如何格式化我的表单以及如何在 jinja2 中格式化我的 html 页面，以便它显示 SelectField 和基于 SelectField 中数字的输入字符串字段的数量？

Answer 1

基本上，您需要依靠 jQuery/javascript-- 但这里有一个粗略的示例：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import FieldList, StringField, SelectField

app = Flask(__name__)
app.secret_key = 'TEST'


class PracticeForm(FlaskForm):
    min_choices, max_choices = 2, 6
    choices = [(x, str(x)) for x in range(min_choices, max_choices)]
    number_of_fields = SelectField(u'How many input fields?', choices=choices, coerce=int)
    data_field = FieldList(StringField('Data'), min_entries=min_choices, max_entries=max_choices)


@app.route('/', methods=['POST', 'GET'])
def example():
    form = PracticeForm()
    if form.validate_on_submit():
        print(form.data_field.data)
        print(form.number_of_fields.data)
    else:
        print(form.errors)

    return render_template('example.html', form=form)


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

神奇的是 FieldList-- 现在验证器将接受 StringField 的多个条目（介于最小值和最大值之间），并且它会正常验证。

现在您的技巧是使用 jQuery 读取 SelectField 的值——默认情况下将显示两个（因为它是最小值）所以只要看一下代码，您就会只是想看看 SelectField 值是否发生变化，然后做点什么..

例如——如果 SelectField 更改为 3——你需要插入：

<li>
    <label for="data_field-2">Data</label>
    <input id="data_field-2" name="data_field-2" type="text" value="">
</li>

这是一个非常粗略的 jQuery 要求，它只是擦除 <ul> 并根据所选字段的数量重建它。

<form method="post" action="#">
    {{ form.hidden_tag() }}
    {{ form.number_of_fields }}
    {{ form.data_field }}

    <input type="submit"/>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    function range(start, end) {
        return Array(end - start).fill().map((_, idx) => start + idx)
    }

    $('#number_of_fields').on('change', function() {
        $('#data_field').empty();
        range(0, (this.value * 1)).forEach(function(element) {
            const reference = element;
            $('#data_field').append(
              '<li>' +
                '<label for="data_field-'+ reference + '">Data</label> ' +
                '<input id="data_field-'+reference+'" name="data_field-'+reference+'" type="text" value="">' +
                '</li>'
            );
        });
    });
</script>

如何根据来自 selectfield 的用户输入在表单中动态创建字段？

How to dynamically create fields in form based on user input from selectfield?

python

flask

flask-wtforms