CODEWITHSUNDEEP
pythonhtmlflaskcalculator
David
David

Reputation: 47

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

so, I'm trying to make some sort of wind chill calculator to practice python and flask. And I got the basic calculator working, nothing too fancy, but I just can't figure it out how to reset all the fields.

Like the reset button does reset the id="v" and id="t" fields but it does not work for the id="result" field, and I can't seem to find anything of help.

Thinking of adding and elif condition for the reset button...

So is there a way to tie the reset button to specific fields? Or how could I make it reset everything?

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

Upvotes: 1

Views: 2253

Answers (1)

NavaneethaKrishnan
NavaneethaKrishnan

Reputation: 1326

If you press Reset, it will be reset to the default value. After submitting the form, let's take the value for "calc" is 30. Then your HTML will look like this,

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

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

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

Now, if you change the 30 to some other value and then if you press reset, then it will reset to 30. But the above 2 inputs don't have any default value, so those will reset to empty.

I have a solution for this. You can pass the calc value through Javascript.

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

This won't add any default value. So you can use Reset Button.

Note: Use the input name instead of 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'))

EDIT: If you want this in server-side, then change the HTML like this,

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

And python file should be like this,

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

But this will send an additional request to the backend server. Since we have all the option available in the frontend itself, I think this is not a good method to use backend for resetting the page.

Upvotes: 1

Related Questions