Flask - Make a button direct to another page

Question

On my main page I have a button that says "Enter"

<button id="Enter" type="button" onclick="/profile" class="button">Enter</button>
</div>

I would like it so that when this button is clicked it directs to the "home" page

Python code:

@app.route('/', methods = ['GET', 'POST'])
def index():
    return render_template("main.html")

@app.route('/home', methods = ['GET', 'POST'])
def home():
    return render_template("test1.html")

How can this be done? Thanks

Mashhad

Answer 1

This is the job of an anchor tag.

Jinja2 (the template rendering component of Flask) allows you to use the url_for function to dynamically create a url, for a given view function.

In your case:

<a href="{{ url_for('home') }}">Home</a>

With your code, this will render in the browser as:

<a href="/home">Home</a>

Even if you change the endpoint in the app.route decorator function this will render with the correct URL.

To give this the appearance of a button, I would suggest using the Bootstrap library. This can be included from a CDN by adding the following within the head of your HTML template:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha256-/ykJw/wDxMa0AQhHDYfuMEwVb4JHMx9h4jD4XvHqVzU=" crossorigin="anonymous" />

Then assigning the button styling is as simple as adding a class attribute to your anchor tag:

class='btn btn-primary'

See the other available classes in the bootstrap docs

Feleciafeledy

Thank you! The only thing is that it should be {{ url_for('home') }} not {% url_for('home') %} :) – Mashhad

@peady nice spot ! – Feleciafeledy

Answer 2

There are some ways.

Pass the url function by paramter:

Python Code:

@app.route('/', methods = ['GET', 'POST'])
def index():
    return render_template("main.html", var_home = url_for('home_func'))
    
@app.route('/home', methods = ['GET', 'POST'])
def home_func():
    return render_template("test1.html")

HTML Code:

   <button id="Enter" type="button" onclick="window.location.href = '{{ var_home }}' ; " class="button">Enter</button>

You could use url_for.. instead of the variable name on the button aswell. Like So:

Python Code:

@app.route('/', methods = ['GET', 'POST'])
def index():
    return render_template("main.html")
    
@app.route('/home', methods = ['GET', 'POST'])
def home_func():
    return render_template("test1.html")

HTML:

<button id="Enter" type="button" onclick="window.location.href = '{{ url_for('home_func') }}' ; " class="button">Enter</button>

You can call the view function as well like so:

Python Code:

 @app.route('/', methods = ['GET', 'POST'])
    def index():
        return render_template("main.html")
        
 @app.route('/home', methods = ['GET', 'POST'])
    def home_func():
        return render_template("test1.html")

HTML:

 <button id="Enter" type="button" onclick="window.location.href = '/home' ; " class="button">Enter</button>

Gaston