首页 > 解决方案 > 在 Wtform 中应用 JQuery 在 Flask 中动态执行添加输入字段

问题描述

这是我在谷歌找到的 html 和 jquery 代码。您可以动态添加输入文本标签。

<form method="post" action="submit.php">

    <div class="form-group fieldGroup">
        <div class="input-group">
            <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
            <input type="text" name="email[]" class="form-control" placeholder="Enter email"/>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
            </div>
        </div>
    </div>

    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>

</form>

查询:

<script type="text/javascript">

    $(document).ready(function(){
    //group add limit
    var maxGroup = 10;

    //add more fields group
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });

    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});
</script>

我想在 wtform 中创建它,但我无法以数组形式修改名称

class RegisterUser(FlaskForm):
regusertest = StringField('Username', validators=[
        InputRequired(),
        Length(min=5, max=30)
    ])

这是我的表单标签

<form id="login-form" action="webpage/gmsi/login" method="post" role="form" style="display: block;">
{{ form.hidden_tag() }}
{{ wtf.form_field(form.regusertest) }}
<input type="submit" class="btn btn-primary btn-lg" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">

html标签的输出是

 <input class="form-control" id="regusertest" name="regusertest" required="" type="text" value="">

我需要的是这个

<input class="form-control" id="regusertest" name="regusertest[]" required="" type="text" value="">

标签: javascriptjqueryhtmlpython-3.xflask

解决方案


推荐阅读