Question

我正在尝试从动态添加到FieldList的输入列表中检索数据。我正在使用javascript来添加输入元素。但是，当我尝试使用请求获取输入的数据时，我什么也没回来。如果我要求输入的数据具有添加的输入的特定名称，则可以取回数据。但是我需要知道列表中实际上有多少个输入元素。我猜我的代码结构方式是在填充FieldList之后没有得到它。

这是我的代码：

class SubDirForm(FlaskForm):
subDirName = TextField(validators=[DataRequired()])

class SubDirsForm(FlaskForm):
    subDirList = FieldList(FormField(SubDirForm), min_entries=0)
    submit = SubmitField(label='Print')
    addField = ButtonField(label='Add Field', id='addNewField')


@bp.route('/', methods=['GET', 'POST'])
@bp.route('/index', methods=['GET', 'POST'])
def index():
    form = SubDirsForm()    
    if form.validate_on_submit():
        flash('{}'.format(request.form.getlist('subDirList')))
        flash('{}'.format(request.form.get('subdir1'))) # Hard coding an input name works      
        return redirect(url_for('main.display'))   
    return render_template('index.html', title=('Home'), form=form)


<script>
    $(document).ready(function() {
        var addCount = 1;            
        $("#addNewField").click(function() {
            var newInput = $("#subDirList");
            newInput.append(GetDynamicTextBox("", addCount));
            $("#subDirList").append(newInput);
            addCount += 1;
        });
    });

    function GetDynamicTextBox(value, addCount) {
        return '<div>' + 'Subdirectory&nbsp' + addCount + ':&nbsp' +
        '<input id = "subdir' + addCount + '"name = "subdir' + addCount + '"type="text" value = "' + value + '" />&nbsp;' +
        '<input type="button" value="Remove" class="remove" />' + '</div>' ;
    }

    $(function () {
        $("#addNewField").click(function() {
            $("#subDirList").append(GetDynamicTextBox("", addCount));                

        });

        $("body").on("click", ".remove", function () {
            $(this).closest("div").remove();
            addCount -= 1;
        });
    });
</script>

从动态添加到FieldList的输入中获取数据

0 个答案: