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

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 传递 calc 值。

<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'))

编辑： 如果你想在服务器端这样做，然后像这样更改 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')

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