How to send text from input fields to MySQL database using a python flask app

Question

I am learning to write python and am working on a web application. This has a sign up system with a set of input fields and a submit button. I have confirmed that the database is connected and I can insert data into it when I run the application. When I enter data into an input field, it returns the error:

Bad Request The browser (or proxy) sent a request that this server could not understand.

Here is the python:

from flask import Flask, request, render_template, redirect, url_for
from flask_mysqldb import MySQL;
from DB_Operations import add_text
import mysql.connector

app = Flask(__name__)
db = MySQL(app);

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

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

@app.route("/add_text", methods=["POST", "GET"])
def AddText():
    if request.method == "POST":
        username = request.form["uname"]
        first_name = request.form["fname"]
        last_name = request.form["lname"]
        password = request.form["pwd"]
        email = request.form["email"]
        add_new = add_text(username, first_name, last_name, password, email)
        print("success")
       
    else:
        print("error")
        return render_template('login.html')

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

Second file:

import mysql.connector

#database connection
mydb = mysql.connector.connect(host="localhost",user="root",database="sdv_graphs")
mycursor = mydb.cursor()

def add_text(username,first_name, last_name, password, email):
    sql = "INSERT INTO tbl_user (fname, lname, upwd, umail, uname) VALUES (%s, %s, %s, %s, %s)"
    val = ("{first_name}", "{last_name}", "{password}", "{email}", "{username}")
    mycursor.execute(sql, val)
    mydb.commit()
    return 1

and here is my HTML:

<form action="/add_text" method="POST">
    <div class="login-box">
        <h1 id="page-title">Login</h1>
        <div class="textbox sign-up-textbox">
            <i class="far fa-user"></i>
            <input class="input-box" id="fname" type="text" placeholder="First Name" name="First Name" onfocus="this.placeholder = '', this.parentNode.style.color = 'white'" onblur="this.placeholder = 'First Name'">
        </div>

        <div class="textbox sign-up-textbox">
            <i class="far fa-user"></i>
            <input class="input-box" id="lname" type="text" placeholder="Last Name" name="Last Name" onfocus="this.placeholder = '', this.parentNode.style.color = 'white'" onblur="this.placeholder = 'Last Name'">
        </div>

        <div class="textbox">
            <i class="far fa-user"></i>
            <input class="input-box login" id="uname" type="text" placeholder="Username" name="Username" onfocus="this.placeholder = '', this.parentNode.style.color = 'white'" onblur="this.placeholder = 'Username'">
        </div>

        <div class="textbox">
            <i class="fas fa-lock"></i>
            <input class="input-box login" id="pwd" type="password" placeholder="Password" name="Password" onfocus="this.placeholder = '', this.parentNode.style.color = 'white'" onblur="this.placeholder = 'Password'">
        </div>

        <div class="textbox sign-up-textbox">
            <i class="fas fa-lock"></i>
            <input class="input-box" id="cpwd" type="password" placeholder="Confirm Password" name="Confirm Password" onfocus="this.placeholder = '', this.parentNode.style.color = 'white'" onblur="this.placeholder = 'Confirm Password'">
        </div>

        <div class="textbox sign-up-textbox">
            <i class="far fa-envelope-open"></i>
            <input class="input-box" id="email" type="email" placeholder="Email" name="Email" onfocus="this.placeholder = '', this.parentNode.style.color = 'white'" onblur="this.placeholder = 'Email'">
        </div>
        <button class="submit-btn" type="submit" onclick="validateForm()" name="submit">submit</button>
    </div>
</form>

Is there a simple mistake that I am making or is there an alternative approach I can use to sending this data to my database?

Matteo Pasini · Accepted Answer · 2021-07-27 05:40:18Z

1

"Bad Request The browser (or proxy) sent a request that this server could not understand." it means that through the request object, you are trying to access a request parameter that does not exist.

So the problem is in this piece of code here:

if request.method == "POST":
    username = request.form["uname"]
    first_name = request.form["fname"]
    last_name = request.form["lname"]
    password = request.form["pwd"]
    email = request.form["email"]
    add_new = add_text(username, first_name, last_name, password, email)
    print("success")

I recommend that you print the content of request.form print(str(request.form)), which is a dictionary, so you can see what parameters are passed to the endpoint.

Given your html code, the code would become

if request.method == "POST":
    username = request.form["Username"]
    first_name = request.form["First Name"]
    last_name = request.form["Last Name"]
    password = request.form["Password"]
    email = request.form["Email"]
    add_new = add_text(username, first_name, last_name, password, email)
    print("success")

edited Jul 27, 2021 at 5:40

answered Jul 27, 2021 at 5:24

Matteo Pasini

2,0223 gold badges19 silver badges31 bronze badges

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

1 Comment

mikeGear Over a year ago

I think the issue might be that I was referencing the id name of the element rather than the specified name of the element. If I use your method with random data, it returns

ImmutableMultiDict([('First Name', 'sss'), ('Last Name', 'sss'), ('Username', 'sss'), ('Password', 'sss'), ('Confirm Password', 'sss'), ('Email', 's@s'), ('submit', '')]) success

Collectives™ on Stack Overflow

How to send text from input fields to MySQL database using a python flask app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related