Python Flask / HTML – what is the proper way of displaying an output after HTML form submission?

I am very new to web-development (first project) and have started playing around in Flask. The other day I made a very simple temperature converter which I was running on my local host. The page had a form input to type a value, two radio buttons with Fahrenheit and Celsius to define the system of the value, then a convert button. Here is a screenshot:

Here is my Flask code (“main.py”):

from flask import Flask, render_template
from flask import request, redirect
import temperature, convert, determine_system

app = Flask(__name__)

@app.route('/')
def html():
    return render_template('index.html')

@app.route('/convert', methods = ['POST'])
def convert():
    temp = request.form['temperature']
    system = request.form['system']
    new_temp, destination_system = determine_system.determine_system(temp, system)
    return render_template('convert.html', temp=temp, system=system, new_temp=new_temp, destination_system=destination_system)

if __name__ == "__main__":
    app.run()

As you can see, the first function called “html()” initially renders the “index.html” file and the function “convert()” is executed upon clicking the “Convert” button. There are a few other functions that I have in other .py files in the directory that convert the number to the new system.

Here is the body of my “index.html” code:

<body>
    <div id="banner">
        <h1>Temperature Converter</h1>
        <p class="lead">Use this tool to convert temperature between measurement systems</p>
    </div>
    <form action="/convert" method="post" target="dummyframe">
        <input type="text" name="temperature"></input>
        <input type="radio" name="system" value="Fahrenheit">Fahrenheit</input>
        <input type="radio" name="system" value="Celsius">Celsius</input>
        <br>
        <br>
        <input type="submit" value="Convert"></input>
      </form>
</body>
</html>

To display the converted temperature on the webpage, I currently have another HTML file called “convert.html” in my templates directory that is an exact copy of the “index.html” file, except it includes the following three lines of code in the body after the :

div id="output"></div>
        <p class="output-statement">{{ temp }}° {{ system }} is equal to {{ new_temp }}° {{ destination_system }}</p>
    </div>

In my Flask file (“main.py), I instruct the “convert()” function to render the “convert.html” template which includes the output statement in the code above:

return render_template('convert.html', temp=temp, system=system, new_temp=new_temp, destination_system=destination_system)

This then results in the following (notice the new web address):

I suspect that my way of outputting the converted temperature by redirecting to a new HTML file and web address (http://127.0.0.1:5000/convert) is not efficient or even the correct way of showing accomplishing this. What is the proper way to output something like this? Is there something I can add to the “index.html” file that would allow me to get rid of the “convert.html” file completely? If so, what would I change the last line of the “convert()” function in my Flask (“main.py”) file to?

Thank you in advance and any links with more information on this concept are very appreciated!

Answer

Yes there is a more efficient solution where you do not need the convert.html: This is what you will want in your main route. (note: I suggest renaming your route function to something like “index” or “temp” other than “html”)

@app.route('/', methods=["GET","POST"])
def html():
    output = ""
    
    
    if request.method == "POST":
        temp = request.form['temperature']
        system = request.form['system']
        new_temp, destination_system = determine_system.determine_system(temp, system)
        output = f"{ temp}° { system } is equal to { new_temp }° { destination_system }"


    return render_template('index.html', output=output)

Make sure to import request. using: from flask import request

and in your index.html you will now have:

<div id="output"></div>
        <p class="output-statement">{{output}}</p>
    </div>

And make sure to change form action to action="#" or action=""