页面上的不同WTForms如何区分提交了哪一个

时间：2019-06-13 20:02:30

标签： python flask flask-wtforms

我有一个文本输入可过滤页面上的数据，还有多个复选框输入可作为将收藏夹添加到用户列表的工具。看起来像这样的想法：

page layout

问题是当一种表单提交另一种表单提交时，并且选中一个复选框时，它们都被选中。我很确定我的验证过程是错误的，但是html中可能有问题。

这是我的表格。py：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired
"""
Login form will ensure the different input fields
are filled and assigned them to particular variable.
"""


class LoginForm(FlaskForm):
    username = StringField("Username", validators=[DataRequired()])
    password = PasswordField("Password", validators=[DataRequired()])
    remember_me = BooleanField("Remember Me!")
    submit = SubmitField("Login")


class FilterDataForm(FlaskForm):
    user_input = StringField("")


class FavoritesForm(FlaskForm):
    add_to_favorites = BooleanField(default=False)

这是HTML（抱歉，样式属性）：

{% block content %}
<section class="header" style="z-index: 3; position: fixed; width: 100%; top: 0; height: 75px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; background-color: #333333; color: #ffffff; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);">
    <h1 class="title" style="color: #ffffff; padding: 0 50px 0 50px;">DevJobs</h1>
    <form id="search_input" class="form" method="post" novalidate>
        {{ form.hidden_tag() }}
        {{ form.csrf_token() }}
        {{ form.user_input(form="search_input", size=32, class="search-input", onchange="this.form.submit()", placeholder="Search Location or Keywords in Job Title (press enter)", style="width: 30vw; height: 30px; border-radius: 4px; padding-left: 10px; color: #333333; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);") }}
    </form>
    <!--<input class="search-input" type="text" style="width: 30%; height: 30px; border-radius: 4px; padding-left: 10px; color: #333333; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);" placeholder="Search Keywords in Job Titles">-->
    <div class="menu" style="position: absolute; right: 50px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;">
        <a id="menu-icon" class="far fa-user-circle" style="font-size: 20px; color: #ffffff; background-color: orange; padding: 10px; border-radius: 4px; text-decoration: none; cursor: pointer; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);"></a>
        <a href="/jobs/{{ user['ID'] }}/favorites" class="favorites-btn" style="width: 100%; text-align: center; cursor: pointer; display: none; color: #333333; background-color: #f4f4f4; padding: 10px; text-decoration: none; border-radius: 4px 4px 0 0; border-bottom: 1px solid #333333; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);">Favorites</a>
        <a href="/" class="home-btn" style="width: 100%; text-align: center; cursor: pointer; display: none; color: #333333; background-color: #f4f4f4; padding: 10px; text-decoration: none; border-radius: 0 0 4px 4px; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);" >Logout</a>
    </div>
</section>
<section class="jobs-background" style="margin: 95px 0 0 0; padding: 0;"> <!--why 95px-->
    <div class="title-wrap" style="text-align: center;">
        <h3>Internships & Entry-Level Jobs</h3><p>Posted in the last 24 hours </p>
    </div>
    <div class="jobs-container" style="display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; background-color: #f4f4f4; padding: 20px 0 20px 0;">
        {% for i in range(job_count) %}
            <div class="job-container" style="height: 375px; width: 350px; background-color: #ffffff; border: 1px solid #eeeeee; border-radius: 4px; color: #999999; margin: 20px 10px 20px 10px; padding: 5px 10px 5px 10px; cursor: pointer; box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24); padding: 0 !important; transition: opacity 0.2s linear;">
                <div class="favorite" style="text-decoration: none; z-index: 2; padding: 0;">
                    <i class="medium material-icons" style="align-self: flex-end; color: orange; font-size: 25px; cursor: pointer; position: relative; top: 15px; right: 15px; float: right;">bookmark_border</i>
                    <form id="favorited" method="post" novalidate>
                        {{ forms[i].hidden_tag() }}
                        {{ forms[i].csrf_token() }}
                        {{ forms[i].add_to_favorites(id="favorited", onchange="this.form.submit()", value=i) }}
                    </form>
                </div>
                <a href="{{ jobs[i].link }}" target="_blank" style="z-index: 1; text-decoration: none;">
                    <div class="job-info" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 55px 0 0 0;">
                        <p style="color: #333333; font-size: 17px; text-align: center; padding: 0 20px 0 20px">{{ jobs[i].title }}</p>
                        <p class="sub-text" style="text-align: center; padding: 0 20px 0 20px; color: rgba(0, 0, 0, 0.6);">{{ jobs[i].company }}</p>
                        <p class="sub-text" style="text-align: center; padding: 0 20px 0 20px; color: rgba(0, 0, 0, 0.6);">{{ jobs[i].location }}</p>
                        <p class="sub-text" style="text-align: center; padding: 0 20px 0 20px; color: rgba(0, 0, 0, 0.6);">{{ jobs[i].date }}</p>
                        <img class="logo" src="{{ jobs[i].logo }}" alt="logo" style="width: 50px; height: 50px; border-radius: 50%; background-size: cover; border: 1px solid black;">
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
</section>
{% endblock %}

最后是路线功能（很抱歉，该功能的当前设置。稍后计划验光）：

@app.route('/jobs/<int:user_id>', methods=['GET', 'POST'])
def display_jobs(user_id):
    # USER Data
    with open('users.json', 'r+') as jsonfile:  # seperate function (users-r)
        users_data = json.loads(jsonfile.read())
        jsonfile.close()
    for data in users_data:
        if data["ID"] == user_id:
            user_data = data
    # JOB Data
    form = FilterDataForm(request.form)
    user_input = None
    if form.validate_on_submit():
        user_input = form.user_input.data
    '''
    runpy.run_path("./pyproject.py")
    '''
    with open("jobs.json", "r+") as jsonfile:  # seperate function (jobs-r)
        unfiltered_jobs = json.loads(jsonfile.read())
        jsonfile.close()
    jobs = filter(lambda job: "Revature" not in job["company"], unfiltered_jobs)
    filtered_jobs = []
    if user_input is not None:
        for job in jobs:
            if user_input.lower() in job["title"].lower() or user_input.lower() in job["location"].lower():
                filtered_jobs.append(job)
    else:
        '''
        runpy.run_path("./pyproject.py")
        '''
        with open("jobs.json", "r+") as jsonfile:  # seperate function (jobs-r)
            unfiltered_jobs = json.loads(jsonfile.read())
            jsonfile.close()
        filtered_jobs = list(filter(lambda job: "Revature" not in job["company"], unfiltered_jobs))
    # favorite job section
    job_count = len(filtered_jobs) 
    print(job_count)
    forms = []
    for i in range(job_count):
        forms.append(FavoritesForm(request.form))
        if forms[i].validate_on_submit():
            filtered_jobs[i]["favorite"] = forms[i].add_to_favorites.data

    return render_template("jobs.html", title="Entry-Level CS Jobs", form=form, user_input=user_input, user=user_data, jobs=filtered_jobs, job_count=job_count, forms=forms)

任何帮助将不胜感激。

0 个答案:

没有答案
相关问题
最新问题