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

debugcn 发表于 Dev

大卫

因此，我正在尝试制作某种风冷计算器来练习python和flask。而且我让基本计算器正常工作了，没什么花哨的，但是我无法弄清楚如何重置所有字段。

就像“重设”按钮可以重设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>

纳瓦尼莎·克里希南

如果按重置，它将被重置为默认值。提交表单后，让我们将“ 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更改为其他值，然后按reset，则它将重置为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')

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。