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

问题描述

所以，我正在尝试制作某种风冷计算器来练习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>

解决方法

如果按Reset（重置），它将被重置为默认值。提交表单后，让我们将“ calc”的值设置为30。这样您的HTML就会像这样，

def get_metrics(loc):
    request_body = {
      "locationNames": [ loc['id'] ],"basicRequest" : {
              "metricRequests": [
                 {
                   "metric": 'ALL',"options": ['AGGREGATED_DAILY']
                 }
              ],"timeRange": {
                   "startTime": start_time_range,"endTime": end_time_range,},}
    }

    request_url = <request url> 
    report_insights_response = http.request(request_url,"POST",body=json.dumps(request_body))

    report_insights_response = report_insights_response[1]
    report_insights_response = report_insights_response.decode().replace('\\n','')
    report_insights_json = json.loads(report_insights_response)

            <bunch of logic to parse the right metrics,am not including because this runs in a separate manual script without issue>

            my_data = json.dumps(my_data)

            project_id = "project_id"
            topic_name = "location-metrics"
            topic_id = "projects/project_id/topics/location-metrics"

            publisher = pubsub_v1.PublisherClient()
            topic_path = publisher.topic_path(project_id,topic_name)

            print("publisher: ",publisher)
            print("topic_path: ",topic_path)
            try:
                publisher.publish(topic_path,data=gmb_data.encode('utf-8'))
                print("publish successful: ",loc['name'])
            except Exception as exc:
                print("topic publish failed: ",exc)

def retrieve_location(event,context):
    auth_flow()
    message_obj = event.data
    message_dcde = message_obj.decode('utf-8')
    message_json = json.loads(message_dcde)

    get_metrics(message_json)

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

我对此有解决方案。您可以通过Javascript传递calc值。

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

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

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

这不会添加任何默认值。因此，您可以使用“重置按钮”。

注意：使用输入名称代替ID。

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

编辑：如果要在服务器端使用此功能，则可以这样更改HTML，

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

并且python文件应该是这样的，

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

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

calculator flask html python