html - 在 Flask 中单击按钮时隐藏/显示表单
问题描述
我正在学习创建一个 wtf Flask 网络表单,它是:
class Update(FlaskForm):
username = StringField('Username', validators=[DataRequired()])
email = StringField('Email', validators=[DataRequired(), Email()])
pic = FileField('Update Profile Pic', validators=[FileAllowed(['jpg','png'])])
submit = SubmitField('Update')
我想要做的是,表单将在单击按钮时加载到同一页面上,而无需为表单创建单独的 html 页面。如何通过使用 Flask 或 HTML 来完成?如果必须对路线进行任何更改,请同时提及。
HTML 代码:
<div class="content-section">
<form method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Account Info</legend>
<div class="form-group">
{{ form.username.label(class="form-control-label") }}
{% if form.username.errors %}
{{ form.username(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.username.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.username(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group">
{{ form.email.label(class="form-control-label") }}
{% if form.email.errors %}
{{ form.email(class="form-control form-control-lg is-invalid") }}
<div class="invalid-feedback">
{% for error in form.email.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.email(class="form-control form-control-lg") }}
{% endif %}
</div>
<div class="form-group">
{{ form.pic.label() }}
{{ form.pic(class="form-control-file") }}
{% if form.pic.errors %}
{% for error in form.picture.errors %}
<span class="text-danger">{{error}}</span><br>
{% endfor %}
{% endif %}
</div>
</fieldset>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }}
</div>
</form>
解决方案
您可以正常加载表单,并将其可见性设置为hidden
. 如果有人单击该按钮,只需将表单的可见性更改为visible
.
下面的例子:
function toggle_display(){
el = document.querySelector('.content_section');
if(el.style.visibility == 'hidden'){
el.style.visibility = 'visible'
}else{
el.style.visibility = 'hidden'
}
}
<button onclick="toggle_display()">Toggle display</button>
<div class="content_section">See me no more</div>
编辑:
还要提到一件事,visibility
属性设置为hidden
占用空间,即使它是隐藏的。要完全删除表单将占用的空间并隐藏表单,请将display
属性设置为none
. 要再次显示,请设置display
为block
。
推荐阅读
- dialogflow-es - Dialogflow 可以完全用文本编辑器开发吗?
- c++ - Botan/C++ - 使用大于 32 字节的密钥使用 AES 加密
- reactjs - React hooks 在 useEffect 的清理函数中丢失了状态变量的更新值
- javascript - '完整日历' 仅在周视图中删除事件点
- python - python pip安装程序问题
- vba - 用于重新格式化部分标题的宏
- python-3.x - Django many to many 真的有必要吗?
- pdf - 如何在中使用 ReadAloud
- java - 尝试在 @Before 中实例化一个对象
- python - 如何在 sympy 中分解平方项