How do i access another page in flask

Question

I have three pages the home page and the add page and result page i can acess the home page but when i click the button to access the add page i can't

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <title>Fen</title>
</head>
<body>
<section>
    <div class="form-box">
        <div class="form-value">
            <!-- This should be post method and the action should be the desired route -->
            <form method="POST" action="/">
                <h2>Add Phone</h2>
                <div class="inputbox">
                    <ion-icon name="mail-outline"></ion-icon>
                    <input name="name" id="name" type="text">
                    <label for="">Name</label>
                </div>
                <div class="inputbox">
                    <ion-icon name="mail-out-line"></ion-icon>
                    <input name="phone_name" id="phone_name" type="text">
                    <label for="">Phone Name</label>
                </div>
                <div class="inputbox">
                    <ion-icon name="lock-closed-outline"></ion-icon>
                    <input name="serial_number" type="text" id="sr" required>
                    <label for="">Serial number</label>
                </div>   
                <div class="inputbox">
                    <ion-icon name="lock-closed-outline"></ion-icon>
                    <input name="email" type="email" id="em" required>
                    <label for="">E-mail</label>
                </div>   
                <div class="inputbox">
                    <ion-icon name="lock-closed-outline"></ion-icon>
                    <input name="number" type="text" id="pn" required>
                    <label for="">Phone Number</label>
                </div>
                <button id="log" type="submit">Add Phone</button>
            </form>
        </div>
    </div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

and here is the python/flask code:

from flask import Flask, render_template, request, redirect
import sqlite3

app = Flask(__name__)

def create_close(connection):
    try:
        connection.commit()
        connection.close()
        print("Closed database successfully and saved the changes")
    except:
        print("Unable to close the database") 

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


@app.route('/add')
def main():
    # Create the table if it doesn't exist
    connection = sqlite3.connect('phonebook2.db')
    cursor = connection.cursor()

    # Creating the query for adding a table in the database
    create_table_query = '''
        CREATE TABLE IF NOT EXISTS phonebook2 (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT,
            number TEXT
        )
    '''
    cursor.execute(create_table_query)
    create_close(connection)
    return render_template('add_button.html')


@app.route('/add', methods=['POST'])
def phonebook():
    name = request.form['name']
    phonenumber = request.form['number']
    connection = sqlite3.connect('phonebook2.db')
    cursor = connection.cursor()
    query1 = "INSERT INTO phonebook2 (name, number) VALUES (?, ?)"
    cursor.execute(query1, (name, phonenumber))
    create_close(connection)

    # After submit, redirecting to the result page
    return redirect("/result?name=" + name)


@app.route('/result', methods=['GET'])
def result():
    try:
        name = request.args.get('name')
        connection = sqlite3.connect('phonebook2.db')
        cursor = connection.cursor()
        query2 = "SELECT number from phonebook2 WHERE name = ?"
        result = cursor.execute(query2, (name,))
        result = result.fetchone()
        create_close(connection)

        if result:
            phonenumber = result[0]
        else:
            phonenumber = ""
        
        return render_template('result.html', n=name, p=phonenumber)
    
    except:
        return render_template('result.html', n="", p="")


if __name__ == '__main__':
    app.run(debug=True)

I tried to change the url and also i am begginer in flask still trying to learn

Thank you for trying to help me

Nothing in your code is calling the `/add` route. Your form says `action="/"`, which means the submit button fires the `"/"` route. — Tim Roberts, Jun 24 '23 at 06:19

score 1 · Answer 1 · answered Jun 24 '23 at 06:25

The issue could be that your form action URL is wrong in your HTML. Right now, it's set to action="/", which means the form data will be submitted to your homepage route.

Looking at your Python code, the route where you want to handle POST requests is /add. You should change your form action to action="/add".

Here is the updated part of your HTML code:

<form method="POST" action="/add">
  <h2>Add Phone</h2>
  <!-- Rest of your form -->
  <button id="log" type="submit">Add Phone</button>
</form>

Also, make sure that your add_button.html file is located in the templates directory, as Flask's render_template function looks for templates in a folder named templates by default.

score 0 · Answer 2 · answered Jun 24 '23 at 07:15

<form method="POST" action="/add">
  <h2>Add Phone</h2>
  <!-- Rest of your form -->
  <button id="log" type="submit">Add Phone</button>
</form>

If you are using tag then use the attribute action in tag and use the route name of the function that you created to run next.

How do i access another page in flask

2 Answers2