使用BooleanField使用Javascript切换隐藏html元素

问题描述 投票:0回答:1

我正在尝试使用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那将是伟大的,但只是想让这个工作比什么都重要。

javascript python-3.x flask flask-wtforms
1个回答
0
投票

我已经为我解决了这个问题。

我设法解决的解决方案是我引用了我放入复选框的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>

这似乎现在非常明显,但万一其他人遇到类似的问题希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.