How do I pass data from my html flask to my sqlite3 database(python)

Question

I am trying to make an app where the user put's in a couple of inputs and i need the inputs to go to my database and my other page which is results which will show it i already don't where it sends to the other page i am having a problem trying to send the data to my database and i want it to send the Phone Name and serial number to the database only.

Here Is My 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')   }}">
        <script type="text/javascript" src="{{url_for('static', filename='script/result.js')}}"></script>
        <title>Fen</title>
</head>
<body>
    <section>
        <div class="form-box">
            <div class="form-value">
                <form method="GET" action="result.html">
                    <h2>Add Phone</h2>
                    <div class="inputbox">
                        <ion-icon name="mail-outline"></ion-icon>
                        <input name="Person Name" id="Name" type="text">
                        <label for="">Name</label>
                    </div>
                    <div class="inputbox">
                        <ion-icon name="mail-outline"></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="E-Mail" type="email" id="em" required>
                        <label for="">E-mail</label>
                    </div>   
                    <div class="inputbox">
                        <ion-icon name="lock-closed-outline"></ion-icon>
                        <input name="Phone 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>
    <script>
        window.addEventListener('load', () => {  
        const parms = (new URL(document.location)).searchParams;
        const username = parms.get('Person Name')
        const PhoneName = parms.get('Phone Name')
        const SerialNumber = parms.get('Serial Number')
        const Email = parms.get('E-Mail')
        const PhoneNumber = parms.get('Phone Number')
        document.getElementById('name').innerHTML = username
        document.getElementById('result-name').innerHTML = PhoneName
        document.getElementById('result-surname').innerHTML = SerialNumber
        document.getElementById('result-Email').innerHTML = Email
        document.getElementById('result-number').innerHTML = PhoneNumber
})

console.log('welcome')
    </script>
</body>
</html>

and here is my python/flask code:

from flask import *
import sqlite3

app = Flask(__name__)

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

@app.route('/', methods = ['POST'])

def phonebook() :
    name = request.form['name']
    phonenumber = request.form['number']
    connection = sqlite3.connect('phonebook2.db')
    cursor = connection.cursor()
    query1 = "INSERT INTO phonebook2 VALUES ({n},{sn})".format(n=name,sn=phonenumber)    
    cursor.execute(query1)
    connection.commit()

@app.route('/result',methods = ['GET'])
def result ():
    try:
        if request.method == "GET":
               name = request.args.get('name')
               connection = sqlite3.connect('phonebook2.db')
               cursor = connection.cursor()
               query2 = "SELECT number from phonebook2 WHERE Name = {n}".format(n=name)
               result = cursor.execute(query2)
               result =  result.fetchall()[0][0]
               return render_template('result.html', phonenumber = result)
    except:
        return render_template('result.html', phonenumber = "")
        
               
if __name__ == '__main__':
    app.run(debug=True)

I Tried some things but it didn't work and also it's my first time using flask and sqlite3 i know bit of the basics about them

thank you for taking the time to look at my code

score 0 · Accepted Answer · answered Jun 22 '23 at 05:49

I appreciate the effort you took for learning this and solutions you tried.It still needs some refinements.

Things to change

You have to create a new table in phonebook2.db to store the information.
You should define POST instead of GET in the html to reach the form submission at the desired route.
request.form['name'] if you would like to read the submitted form data as this, the input element should be like <input name="name" id="name" type="text">. The input tag field name should match as the key you are trying to get.

See the updated codes

HTML

....
<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-outline"></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>
....

app.py

from flask import *
import sqlite3

app = Flask(__name__)

@app.route('/')
def main() :
    # This is to create a table if it is not exists
    connection = sqlite3.connect('phonebook2.db')
    cursor = connection.cursor()
    create_table_query = '''
        CREATE TABLE IF NOT EXISTS phonebook2 (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT,
            number TEXT
        )
    '''
    cursor.execute(create_table_query)
    connection.commit()
    connection.close()
    return render_template('/Phonebook.html')


@app.route('/', 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 ('{n}','{sn}')".format(n=name,sn=phonenumber)    
    cursor.execute(query1)
    connection.commit()
    
    # After submit, redirecting to the result page
    return redirect("/result?name=" + name)

@app.route('/result',methods = ['GET'])
def result ():
    try:
        if request.method == "GET":
               name = request.args.get('name')
               connection = sqlite3.connect('phonebook2.db')
               cursor = connection.cursor()
               query2 = "SELECT number from phonebook2 WHERE name = '{n}'".format(n=name)
               result = cursor.execute(query2)
               result =  result.fetchall()[0][0]
               return render_template('result.html', phonenumber = result)
    except:
        return render_template('result.html', phonenumber = "")
        
               
if __name__ == '__main__':
    app.run(debug=True)

References

Happy learning.. :)

thank you for the help but when i try to go to the result page it tells me it can't find the url — Ammar Ehab, Jun 22 '23 at 07:42
You might missed something...See the url is `result` and you have an html at `templates/result.html` — PRATHEESH PC, Jun 22 '23 at 07:45

How do I pass data from my html flask to my sqlite3 database(python)

1 Answers1