如何绑定重置按钮以清除烧瓶中的特定或所有字段

Question

所以，我正在尝试制作某种风冷计算器来练习 python 和烧瓶。我得到了基本的计算器工作，没什么特别的，但我就是不知道如何重置所有字段。

就像重置按钮确实重置了 id="v" 和 id="t" 字段但它对 id="result" 字段不起作用，我似乎找不到任何帮助。

考虑为重置按钮添加 elif 条件...

那么有没有办法将重置按钮绑定到特定字段？或者我怎样才能让它重置所有内容？

# .py file:
@app.route('/', methods=['POST', 'GET'])
def calc():
    if request.method == 'POST':
        if 't' in request.form and 'v' in request.form:
            t = int(request.form.get('t'))
            v = int(request.form.get('v'))
            calc = fnc.wind_chill(t, v)
            return render_template('app.html', title='Chill Calc', calc=calc)
        elif ????:
            return ????
    else:
        return render_template('app.html', title='Chill Calc')

# .html file:
<div class="container">
    <form action="/" method="POST">
        <label>Speed:</label>
        <input class="pure-u" type="number" id="v" name="speed" placeholder="Input speed here">
        <label>Temperature:</label>
        <input class="pure-u" type="number" id="t" name="temp" placeholder="Input temp here">
        <div>
            <input type="submit" value="Calculate" id="calculate_button"/>
            <input type="reset" value="Reset" id="reset_button"/>
            <div class="alert">
                Chill is:
                <input class="pure-u" type="text" id="result" value="{{ calc }}" onclick="reset"/>
            </div>
        </div>

    </form>
</div>

Answer 1

如果按重置，它将重置为默认值。提交表单后，让我们将“calc”的值设为 30。那么您的 HTML 将如下所示，

<input id="v" name="speed" placeholder="Input speed here">

<input id="t" name="time" placeholder="Input temp here">

<input id="result" ***value="30"***/>

现在，如果您将 30 更改为其他值，然后按重置，它将重置为 30。但是以上 2 个输入没有任何默认值，因此它们将重置为空。

我有一个解决方案。您可以通过 Javascript.

传递计算值

<form>
    .....
    Chill is:
    <input class="pure-u" type="text" id="result"/>
</form>
<script>
    document.getElementById('result').value = "{{calc}}"
</script>

这不会添加任何默认值。所以你可以使用重置按钮。

注意：使用输入名称而不是 ID。

# wrong.
if 't' in request.form and 'v' in request.form:
    t = int(request.form.get('t'))
    v = int(request.form.get('v'))

# use name instead of ID
if 'time' in request.form and 'speed' in request.form:
    t = int(request.form.get('time'))
    v = int(request.form.get('speed'))

编辑：如果你想在 server-side 中使用这个，那么就把 HTML 改成这样，

<form method="POST">
    Speed: <input type="number" id="v" name="v" placeholder="Input speed here"><br>
    Temparature: <input type="number" id="t" name="t" placeholder="Input temp here"><br>
    <button name='btn' value="calculate">Calculate</button>
    <button name='btn' value="reset">Reset</button><br>
    Chill: <input type="text" value="{{calc}}" id="result"/>
</form>

而python文件应该是这样的，

@app.route('/', methods=['POST', 'GET'])
def calc():
    if request.method == 'POST':
        if request.form['btn'] == 'calculate':
            t = int(request.form.get('t'))
            v = int(request.form.get('v'))
            calc = t*v
        else:
            calc = ''
        return render_template('wind.html', title='Chill Calc', calc=calc)
    return render_template('wind.html', title='Chill Calc')

但这会向后端服务器发送一个额外的请求。由于我们在前端本身提供了所有可用选项，我认为这不是使用后端重置页面的好方法。

如何绑定重置按钮以清除烧瓶中的特定或所有字段

How to tie reset button to clear specific or all fields in flask

html

python

calculator

flask