我正在尝试使用Flask实现一个复选框,如果另一个字段可见则切换。如果我只用HTML做这个工作正常,但我显然不会在Flask中理解这个问题。
我的HTML和javascript位于页面底部。
<!DOCTYPE html>
{% import "bootstrap/wtf.html" as wtf %}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
{% block content %}
<div class="page-header">
<h1>Normal Change Request</h1>
<h4>Hello, Gavin White</h4>
</div>
<form class="hide-test" method="post" role="form">
<div id="core-dte">
{{form.coreDate.label}}
{{form.coreDate}}
</div>
<div id="hiding-dte" style="display:block">
{{form.hideDate.label}}
{{form.hideDate}}
</div>
<div id="chk-button">{{form.hide.label}}</div>
<div id="chkHide" onclick='myFunction("chkHide", "hiding-dte")'>{{form.hide}}</div>
<div>
{{form.submit}}
</div>
</form>
{% endblock %}
<script>
function myFunction(chk, txt) {
var checkBox = document.getElementById(chk);
var text = document.getElementById(txt);
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
蟒蛇:
class BaseForm(FlaskForm):
'''
'''
coreDate = DateField('Date:')
hideDate = DateField('Hide Date:')
hide = BooleanField('Hide')
submit = SubmitField('Submit')
@app.route('/')
def index():
'''
'''
baseForm = BaseForm()
if baseForm.validate_on_submit():
core_date = baseForm.coreDate.data
hide_date = baseform.hideDate.data
hide = baseForm.hide.data
return '<h1>Success<\h1>'
else:
return render_template('hide-test.html', form=baseForm)
我用google搜索并尝试了一些实现,但现在在品脱的地方,我很烦我拔头发并需要一些帮助。如果有一种方法可以使用python来做到这一点,而不是javascript那将是伟大的,但只是想让这个工作比什么都重要。
我已经为我解决了这个问题。
我设法解决的解决方案是我引用了我放入复选框的html标签。
<div id="chkHide" onclick='myFunction("chkHide", "hiding-dte")'>{{form.hide}}</div>
这允许我隐藏元素,但是由于我不明白的原因,再次点击时不会显示元素。
解决方法,我加载了页面并检查了checkbox元素,发现它的id,与其名称“hide”相同我更改了函数调用以引用它作为要测试的复选框。
<div id="check" onclick='myFunction("check", "hiding-dte")'>{{form.hide}}</div>
这似乎现在非常明显,但万一其他人遇到类似的问题希望这会有所帮助。