使用Flask-WTF / WTForms在Flask中添加取消按钮 1在视图功能中捕获按钮提交 2创建一个<a>按钮而不是cancel字段

如何解决使用Flask-WTF / WTForms在Flask中添加取消按钮 1在视图功能中捕获按钮提交 2创建一个<a>按钮而不是cancel字段

我想添加一个取消按钮，该按钮可以返回上一页。 我的代码是： forms.py：

from flask_wtf import Form
from wtforms import StringField,HiddenField,SubmitField
from wtforms.validators import DataRequired,Length,ValidationError


def _required(form,field):
    if not field.raw_data or not field.raw_data[0]:
        raise ValidationError('Field is required')

class OrganisationForm(Form):
    id = HiddenField('id',default="-1")
    name = StringField('name',validators=[DataRequired()])
    manager_name = StringField('manager_name')
    address = StringField('address',validators=[DataRequired()])
    city = StringField('city',validators=[DataRequired()])
    postal_code = StringField('postal_code',validators=[DataRequired(),Length(max=16)])
    province = StringField('province',validators=[Length(max=2,message="Can't exceed 2 characters")])
    country = StringField('country',validators=[DataRequired()])
    submit = SubmitField('Add')
    cancel = SubmitField('Cancel')

和模板页面：

{% block content %}
<div class="content-section">
  {{ utils.flashed_messages() }}
  <div class="center">

      {% if add_orgnisation %}
                <h1>add an organisation</h1>
            {% else %}
                <h1>Edit an organisation</h1>
      {% endif %}
    <br/>
    <br/>
    {{ wtf.quick_form(form,novalidate=True) }}
  </div>
</div>
{% endblock %}

views，py

@orgs.route('/organisations/org_new')
@login_required
def org_new():
    add_orgnisation = True
    form = OrganisationForm()
    return render_template("organisations/organisation_form.html",form=form,title="New Organisation",edit=False,add_orgnisation=add_orgnisation)

单击“取消”按钮时出现405错误：不允许使用方法。

我的错误在哪里？单击“取消”后，我应该添加什么以返回上一页？

谢谢

解决方法

这就是我的工作方式。

以我的形式...

btn_cancel = SubmitField(label='Cancel',render_kw={'formnovalidate': True})

在我的Python代码中（在您的情况下为views.py）...

if request.method == 'POST':
    if form.btn_cancel.data:
        return redirect(url_for('data'))

最后一刻编辑：下面有关允许您的视图功能接受POST请求的李莉的说明也很重要。确保将其签出。

,

单击“取消”按钮时出现405错误：不允许使用方法。我的错误在哪里？

提交表单时，数据将作为POST请求发送（因为呈现的表单元素将使用<form method="post">）。但是，您的视图函数仅允许默认使用GET请求，要接受POST请求，则必须指定methods参数，如下所示：

@orgs.route('/organisations/org_new',methods=['GET','POST'])  # <--
@login_required
def org_new():
   # ...

当我单击“取消”时，我应该添加什么以返回上一页？

使用SubmitField创建的任何字段都将呈现为提交按钮（<input type="submit">），因此当您单击该表单时，它将提交表单。

要使其在单击“取消”按钮时返回上一页，通常有两种方法可以实现此目的：

1。在视图功能中捕获按钮提交

类似于Ben's answer中的方法。您可以捕获提交，然后将用户重定向到上一页：

@orgs.route('/organisations/org_new','POST'])
@login_required
def org_new():
    if request.method == 'POST':
        if form.cancel.data:  # if cancel button is clicked,the form.cancel.data will be True
            return redirect(url_for('previous_page_view_name'))
    # ...

P.S。由于您已经在novalidate=True中设置了wtf.quick_form，因此无需在表单类的render_kw={'formnovalidate': True}按钮上设置cancel。

2。创建一个<a>按钮而不是cancel字段

您可以创建一个普通的<a>元素作为取消按钮（class="btn btn-secondary"），并用上一页的URL填充href参数（那么您无需添加{{1 }}字段）。这样，您将无法使用cancel，而需要使用wtf.quick_form()手动呈现每个字段：

wtf.form_field()

,

否，我正在使用TimeField强制捕获有效时间。我没有尝试将其更改为普通文本字段，因此改用了上面的“取消链接”选项。我的偏好还是要有一个“取消”按钮。