![](/img/trans.png)
[英](javascript) onClick="form.submit(); doesn't work on IE & Opera
[英]Javascript onclick event that shows result after a form.submit
我构建了一个 Flask 应用程序,它应该在通过过滤器后显示数据帧。 为此,我使用 Flask-WTF 创建了一个表单来请求特定的过滤器,然后应用它。 我需要在提交表单时显示数据框结果。 所以我将数据框结果的可见性设置为隐藏,并添加了一个事件 onclick {{ form.submit(onclick="showResult()") }}
。 但是当我点击提交按钮时,结果会短暂出现,然后在表单加载完成后消失。 这是代码:
服务器.py
def get_df():
df = pd.DataFrame({'A': [0, 1, 2, 3, 4],
'B': [5, 6, 7, 8, 9],
'C': ['a', 'b', 'c', 'd', 'e']})
return df
@app.route('/', methods=("POST", "GET"))
def index():
df_result = get_df()
form = NameForm()
message = ""
if form.validate_on_submit():
name = form.name.data
df_result = df_result.loc[df_result['C']==name]
message = 'your input is ' + name
return render_template('index.html', tables=[df_result.to_html(classes='data', header="true")], form=form, message=message)
索引.html
{% extends 'layout.html' %}
{% block content %}
<form method=post>
{{ form.csrf_token }}
{{ form.name }}
{{ form.submit(onclick="showResult()") }}
</form>
<p class="pt-5"><strong>{{ message }}</strong></p>
<div id="result" style="visibility:hidden;">
{% for table in tables %}
{{ table|safe }}
{% endfor %}
</div>
{% endblock %}
javascript.js
function showResult()
{
document.getElementById('result').style.visibility = 'visible'
}
你能帮我弄清楚为什么 javascript 上的可见性样式不持久吗?
您的表单没有 action 属性,因此不确定您的表单提交到哪里进行处理。
表单提交会重新加载页面。 您当前的代码所做的是首先使数据框可见,然后提交强制页面重新加载的表单,这样您的数据框就会恢复不可见。
解决方案是进行异步调用以提交您的表单,即当用户单击提交您的表单时,拦截提交操作并阻止默认提交,然后使用您的异步代码提交表单,处理返回的结果,然后使数据框可见. 您可以在其上构建的示例代码
function showResult(e){
// Stop the default form submission
e.preventdefault()
// Make a POST request to your server sending the form
fetch("/",{ method: "POST", body: new FormData(document.querySelector('form')})
.then(function(result) { // This is the response from the server
return result.json();
})
.then(function(data){
// Process the returned data
......
// Make your frame visible
document.getElementById('result').style.visibility = 'visible'
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.