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

Question

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!

Constantine Westerink · Accepted Answer · 2021-04-01 20:43:46Z

2

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

edited Apr 1, 2021 at 20:43

answered Mar 30, 2021 at 5:19

Constantine Westerink

3215 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adventure-Knorrig Over a year ago

Hi Constantine, thanks for your help. Your solution put me on the right track and I was able to create the program without having to redirect to "/convert" - thanks. I had to change a few more things so I'm going to list them here for others who may come across this: I had to update my "@app.route('/')" to include GET and POST methods, which now looks like this: @app.route('/', methods = ['GET', 'POST']) Additionally, when I updated the "index.html" file, I had to change the form action from "/convert" to simply "/" - the code for the "index.html" body as well as add your code.

Adventure-Knorrig Over a year ago

With that said, I now have the problem that when I press the convert button, the a new tab opens and that is where the output is displayed. Any idea why this is opening in a new tab and how to eliminate this?

Adventure-Knorrig Over a year ago

After changing my form action to only action="" it now works in the same tab

Constantine Westerink Over a year ago

u can also use action="#" in the form

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related