Javascript 在Flask/WTForms中的“选择字段更新”上填充文本字段

伙计们，这让我摸不着头脑，有一种答案，但很难实现

我目前有一个配方和样式表，当提交“添加配方”表单时，它会将样式表中的数据复制到配方中。我想做的是在addrecipe表单中选择一种样式，并让这些数据填充表单字段。因此，我希望在更新样式选择下拉列表时，在表单中填充样式类型

我的设置：

路线：

@app.route('/recipe/new', methods=['GET', 'POST'])
@login_required
def addrecipe():
    form = RecipeForm()
    if form.validate_on_submit():
        recipe = Recipe(recipe_name=form.recipe_name.data, 
                        recipe_style=form.style.data.id,
                        style_name=form.style.data.name, 
                        style_type = form.style.data.type)
        db.session.add(recipe)
        db.session.commit()
        flash('You added your recipe, get brewing!', 'success')
        return redirect(url_for('recipes'))
    return render_template('add_recipe.html', title = 'Add Recipe', form=form, legend='Add Recipe')

class Recipe(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    recipe_name = db.Column(db.String(100), nullable=False)
    recipe_style = db.Column(db.Text, db.ForeignKey('styles.id'))
    style_name = db.Column(db.String(100))
    style_type = db.Column(db.String(100))


# used for query_factory    
def getStyles():
    return Styles.query.order_by(Styles.name.asc())

class RecipeForm(FlaskForm):
    recipe_name = StringField('Recipe Name', validators=[DataRequired(), Length(min=2, max=20)])
    style = QuerySelectField(query_factory=getStyles, 
                            get_label="name")
    style_type = StringField('Style Type')

        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <legend class="border-bottom mb-4">{{ legend }}</legend>
                <fieldset class="form-group card p-3 bg-light">
                    <h5 class="card-title">Overview</h5>
                    <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.recipe_name.label(class="form-control-label") }}
                        {% if form.recipe_name.errors %}
                            {{ form.recipe_name(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.recipe_name.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.recipe_name(class="form-control form-control-sm") }}
                        {% endif %}
                    </div>
            </fieldset>
            <fieldset class="form-group card p-3 bg-light">
                <h5 class="card-title">Style</h5>
                <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.style.label(class="form-control-label") }}
                        <input class="form-control form-control-sm" type="text" placeholder="Search Styles" id="myInput" onkeyup="filterFunction()">
                        {% if form.style.errors %}
                            {{ form.style(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style(class="form-control form-control-sm", id="style_name") }}
                        {% endif %}
                    </div>
                    <div class="form-group col-md-2">
                        {{ form.style_type.label(class="form-control-label") }}
                        {% if form.style_type.errors %}
                            {{ form.style_type(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style_type.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style_type(class="form-control form-control-sm", id="styletype", style_type_tag='{{ form.style.data.type }}' ) }}
                        {% endif %}
                    </div>
            </div>
            </fieldset>

style_name.oninput = function(o) {
    // style = document.getElementById('styletype')
    styletype.value = $(o).attr('style_type_tag')
    }

型号：

@app.route('/recipe/new', methods=['GET', 'POST'])
@login_required
def addrecipe():
    form = RecipeForm()
    if form.validate_on_submit():
        recipe = Recipe(recipe_name=form.recipe_name.data, 
                        recipe_style=form.style.data.id,
                        style_name=form.style.data.name, 
                        style_type = form.style.data.type)
        db.session.add(recipe)
        db.session.commit()
        flash('You added your recipe, get brewing!', 'success')
        return redirect(url_for('recipes'))
    return render_template('add_recipe.html', title = 'Add Recipe', form=form, legend='Add Recipe')

class Recipe(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    recipe_name = db.Column(db.String(100), nullable=False)
    recipe_style = db.Column(db.Text, db.ForeignKey('styles.id'))
    style_name = db.Column(db.String(100))
    style_type = db.Column(db.String(100))


# used for query_factory    
def getStyles():
    return Styles.query.order_by(Styles.name.asc())

class RecipeForm(FlaskForm):
    recipe_name = StringField('Recipe Name', validators=[DataRequired(), Length(min=2, max=20)])
    style = QuerySelectField(query_factory=getStyles, 
                            get_label="name")
    style_type = StringField('Style Type')

        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <legend class="border-bottom mb-4">{{ legend }}</legend>
                <fieldset class="form-group card p-3 bg-light">
                    <h5 class="card-title">Overview</h5>
                    <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.recipe_name.label(class="form-control-label") }}
                        {% if form.recipe_name.errors %}
                            {{ form.recipe_name(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.recipe_name.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.recipe_name(class="form-control form-control-sm") }}
                        {% endif %}
                    </div>
            </fieldset>
            <fieldset class="form-group card p-3 bg-light">
                <h5 class="card-title">Style</h5>
                <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.style.label(class="form-control-label") }}
                        <input class="form-control form-control-sm" type="text" placeholder="Search Styles" id="myInput" onkeyup="filterFunction()">
                        {% if form.style.errors %}
                            {{ form.style(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style(class="form-control form-control-sm", id="style_name") }}
                        {% endif %}
                    </div>
                    <div class="form-group col-md-2">
                        {{ form.style_type.label(class="form-control-label") }}
                        {% if form.style_type.errors %}
                            {{ form.style_type(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style_type.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style_type(class="form-control form-control-sm", id="styletype", style_type_tag='{{ form.style.data.type }}' ) }}
                        {% endif %}
                    </div>
            </div>
            </fieldset>

style_name.oninput = function(o) {
    // style = document.getElementById('styletype')
    styletype.value = $(o).attr('style_type_tag')
    }

表格：

@app.route('/recipe/new', methods=['GET', 'POST'])
@login_required
def addrecipe():
    form = RecipeForm()
    if form.validate_on_submit():
        recipe = Recipe(recipe_name=form.recipe_name.data, 
                        recipe_style=form.style.data.id,
                        style_name=form.style.data.name, 
                        style_type = form.style.data.type)
        db.session.add(recipe)
        db.session.commit()
        flash('You added your recipe, get brewing!', 'success')
        return redirect(url_for('recipes'))
    return render_template('add_recipe.html', title = 'Add Recipe', form=form, legend='Add Recipe')

class Recipe(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    recipe_name = db.Column(db.String(100), nullable=False)
    recipe_style = db.Column(db.Text, db.ForeignKey('styles.id'))
    style_name = db.Column(db.String(100))
    style_type = db.Column(db.String(100))


# used for query_factory    
def getStyles():
    return Styles.query.order_by(Styles.name.asc())

class RecipeForm(FlaskForm):
    recipe_name = StringField('Recipe Name', validators=[DataRequired(), Length(min=2, max=20)])
    style = QuerySelectField(query_factory=getStyles, 
                            get_label="name")
    style_type = StringField('Style Type')

        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <legend class="border-bottom mb-4">{{ legend }}</legend>
                <fieldset class="form-group card p-3 bg-light">
                    <h5 class="card-title">Overview</h5>
                    <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.recipe_name.label(class="form-control-label") }}
                        {% if form.recipe_name.errors %}
                            {{ form.recipe_name(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.recipe_name.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.recipe_name(class="form-control form-control-sm") }}
                        {% endif %}
                    </div>
            </fieldset>
            <fieldset class="form-group card p-3 bg-light">
                <h5 class="card-title">Style</h5>
                <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.style.label(class="form-control-label") }}
                        <input class="form-control form-control-sm" type="text" placeholder="Search Styles" id="myInput" onkeyup="filterFunction()">
                        {% if form.style.errors %}
                            {{ form.style(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style(class="form-control form-control-sm", id="style_name") }}
                        {% endif %}
                    </div>
                    <div class="form-group col-md-2">
                        {{ form.style_type.label(class="form-control-label") }}
                        {% if form.style_type.errors %}
                            {{ form.style_type(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style_type.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style_type(class="form-control form-control-sm", id="styletype", style_type_tag='{{ form.style.data.type }}' ) }}
                        {% endif %}
                    </div>
            </div>
            </fieldset>

style_name.oninput = function(o) {
    // style = document.getElementById('styletype')
    styletype.value = $(o).attr('style_type_tag')
    }

表单HTML:

@app.route('/recipe/new', methods=['GET', 'POST'])
@login_required
def addrecipe():
    form = RecipeForm()
    if form.validate_on_submit():
        recipe = Recipe(recipe_name=form.recipe_name.data, 
                        recipe_style=form.style.data.id,
                        style_name=form.style.data.name, 
                        style_type = form.style.data.type)
        db.session.add(recipe)
        db.session.commit()
        flash('You added your recipe, get brewing!', 'success')
        return redirect(url_for('recipes'))
    return render_template('add_recipe.html', title = 'Add Recipe', form=form, legend='Add Recipe')

class Recipe(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    recipe_name = db.Column(db.String(100), nullable=False)
    recipe_style = db.Column(db.Text, db.ForeignKey('styles.id'))
    style_name = db.Column(db.String(100))
    style_type = db.Column(db.String(100))


# used for query_factory    
def getStyles():
    return Styles.query.order_by(Styles.name.asc())

class RecipeForm(FlaskForm):
    recipe_name = StringField('Recipe Name', validators=[DataRequired(), Length(min=2, max=20)])
    style = QuerySelectField(query_factory=getStyles, 
                            get_label="name")
    style_type = StringField('Style Type')

        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <legend class="border-bottom mb-4">{{ legend }}</legend>
                <fieldset class="form-group card p-3 bg-light">
                    <h5 class="card-title">Overview</h5>
                    <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.recipe_name.label(class="form-control-label") }}
                        {% if form.recipe_name.errors %}
                            {{ form.recipe_name(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.recipe_name.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.recipe_name(class="form-control form-control-sm") }}
                        {% endif %}
                    </div>
            </fieldset>
            <fieldset class="form-group card p-3 bg-light">
                <h5 class="card-title">Style</h5>
                <div class="form-row">
                    <div class="form-group col-md-3">
                        {{ form.style.label(class="form-control-label") }}
                        <input class="form-control form-control-sm" type="text" placeholder="Search Styles" id="myInput" onkeyup="filterFunction()">
                        {% if form.style.errors %}
                            {{ form.style(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style(class="form-control form-control-sm", id="style_name") }}
                        {% endif %}
                    </div>
                    <div class="form-group col-md-2">
                        {{ form.style_type.label(class="form-control-label") }}
                        {% if form.style_type.errors %}
                            {{ form.style_type(class="form-control form-control-sm is-invalid") }}
                            <div class="invalid-feedback">
                                {% for error in form.style_type.errors %}
                                    <span>{{ error }}</span>
                                {% endfor %}
                            </div>
                        {% else %}
                            {{ form.style_type(class="form-control form-control-sm", id="styletype", style_type_tag='{{ form.style.data.type }}' ) }}
                        {% endif %}
                    </div>
            </div>
            </fieldset>

style_name.oninput = function(o) {
    // style = document.getElementById('styletype')
    styletype.value = $(o).attr('style_type_tag')
    }

我可以用JS函数得到一些基本的东西。因此，当我更新下拉列表时，它将用一些文本填充字段。我不知道如何从数据库中提取样式类型信息。顶部的链接将这些信息加载到文本框的html标记中，但这与我正在做的有点不同。海报在一些项目中循环出现，它不是一种形式。我的style_type_标记只是显示为原始文本。我猜这里的循环是至关重要的，但我不能完全进入我的设置

---

非常感谢任何帮助

所以答案是构建一个简单的API。我确信有更简单的方法，但我想在这里进行一些实践，并认为这将有助于在项目中构建其他功能

我跟随Brad Traversy的主题，并使用GET部分制作了这个。他的项目是一个简单的单文件项目，所以我必须在我的项目中更多地参与导入等工作

抓取与API交互

安装棉花糖，在requirements.txt中添加以下行：

然后跑

pip安装-r requirements.txt

导入并初始化棉花糖。在init.py中：

将样式模式添加到models.py

请注意，棉花糖不再需要

strict=True

创建端点/路由，到routes.py：

希望这能帮助任何遇到同样挑战的人