How to show html text beside a form button with flask

Question

I would like to show a small text confirming successful registration next to the "submit" button of the registration form. However it returns my html text on another page. I would like it to be shown on the same page, inside the "form" next to the "button". How do I do that. I'm using python flask. Here goes my code:

from flask import Flask, render_template, request
from flask_mysqldb import MySQL

app = Flask(__name__)
app.config['DEBUG'] = True

app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = '104041122'
app.config['MYSQL_DB'] = 'PAGINA10'

mysql = MySQL(app)

@app.route('/', methods=['GET', 'POST'])
def form():
    if request.method == 'POST':
        digitado = request.form

        nome = digitado['nome']
        cpf = digitado['cpf']
        email = digitado['email']
        birth = digitado['birth']

        cursor = mysql.connection.cursor()
        cursor.execute("CREATE TABLE IF NOT EXISTS pagina10 (nome VARCHAR(50) NOT NULL, cpf VARCHAR(11) NOT NULL, email VARCHAR(20) NOT NULL, birth DATE NOT NULL)")
        cursor.execute("INSERT INTO pagina10 (nome, cpf, email, birth) VALUES (%s, %s, %s, %s)", (nome, cpf, email, birth))
        mysql.connection.commit()
        cursor.close()
        return '<h1> Dados cadastrados com sucesso </h1>'
    return render_template('index.html')

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

And here is my html page:

<form method="POST" action="">
                <div>
                    <i class="fa-solid fa-pen"></i>
                    <input type="text" required name="nome" autofocus placeholder="Nome" data-ls-module="charCounter" maxlength="50" minlength="3"/>
                </div>
                <div>
                    <i class="fa-solid fa-id-card"></i>                    
                    <input type="text" required name="cpf" autofocus placeholder="CPF" minlength="11" maxlength="11"/>               
                </div>
                <div>
                    <i class="fa-solid fa-at"></i>                    
                    <input type="email" required name="email" autofocus placeholder="E-mail" data-ls-module="charCounter" minlength="5"  pattern="[UTF-8]">                
                </div>
                <div>
                    <i class="fa-solid fa-cake-candles"></i> 
                    <input type="date" required name="birth" autofocus placeholder="Nascimento">                
                </div>
                <button type="submit">Cadastrar</button>
            </form>

Answer 1

You can use the package flash from flask to show such messages on your website.
Your python code might look something like:

from flask import flash

@app.route('/registrierung', methods=['GET', 'POST'])
@app.route('/Registrierung', methods=['GET', 'POST'])
def registration_page():  # put application's code here

    registration_form = RegistrationForm()
    # ---------------------------------------------------

    if registration_form.validate_on_submit():
        print(registration_form.is_submitted())
        # ----------------- Database Stuff -------------

        flash(f'Account was created!', 'success')
        return redirect(url_for('login_page'))

    return render_template("registrierung.html", img_var_path=get_background_img_path(), registration_form=registration_form)

And you have to use something like this in your html code:

<!-- flash messages here -->

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="alert" id="hideMe">
            {% for category, message in messages %}
                <div class=" alert_{{ category }}">
                    {{ message }}
                </div>
            {% endfor %}
            </div>
        {% endif %}
    {% endwith %}