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

2024-09-30 03:23:21 发布

您现在位置:Python中文网/ 问答频道 /正文

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

这是我的密码:

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>

Tags: 数据form列表inputindexreturnvaluefunction

热门问题