Is there a better way to keep the form in flask when reloading?

Question

I am working on a webapp in flask. I need to reload the page so I can show the alerts to the user, but then my form gets reset, which is not very user friendly. So what I am doing now is, I am passing in the form, and in each input shacking if I got it, and setting the value.

this is my .py function:

@app.route('/booking', methods=['GET', 'POST'])
def booking():
    if request.method == 'GET':
        return render_template('booking.html')

    if request.form['date'] < str(date.today()):
        flash('Choose upcoming date!', 'error')
        return render_template('booking.html', form=request.form)

    if request.form['from'] >= request.form['to']:
        flash('Start must be before the end!', 'error')
        return render_template('booking.html', form=request.form)

    flash('Request sent!', 'success')
    print(request.form['date'], date.today())
    return redirect(url_for('index'))

my base.html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">

        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

        <link rel="icon" type="image/x-icon" href="static/assets/logo.ico">
        <title>{% block title %}{% endblock %}</title>

        {% block moreScripts %}{% endblock moreScripts %}
    </head>
    <body>
        <div>
            {% include "sweet_alerts.html" %}
        </div>

        {% block content %}{% endblock %}
    </body>
</html>

my booking.html:

{% extends "base.html" %}
{% block title %}
    Booking
{% endblock %}
{% block moreScripts %}
    <link rel="stylesheet" href="static/background.css">
    <link rel="stylesheet"  href="static/forms.css">
{% endblock %}
{% block content %}
    <div class="container-fluid limit">
        <form method="post">
            <div>
                <h1>BOOK</h1>
            </div>

            <div>
                <i class="bi-envelope"> e-mail</i>
                <input type="email" name="email" {% if form %}value={{ form.email }}{% endif %} placeholder="some.one@examp.le" required>
            </div>

            <div>
                <i class="bi-calendar-week"> date</i>
                <input type="date" name="date" {% if form %}value={{ form.date }}{% endif %} required>
            </div>

            <div>
                <i class="bi-clock"> start time</i>
                <input type="time" name="from" {% if form %}value={{ form.from }}{% endif %} required>
            </div>

            <div>
                <i class="bi-clock-history"> end time</i>
                <input type="time" name="to" {% if form %}value={{ form.to }}{% endif %} required>
            </div>

            <div>
                <i class="bi-person"> number of participants</i>
                <input type="number" name="people" {% if form %}value={{ form.people }}{% endif %} required>
            </div>

            <div>
                <button type="submit">Request Booking</button>
            </div>
        </form>
    </div>
{% endblock %}

Any other recommendation is also welcome :).

You could do the form validation in javascript, then the value doesn't even get sent to your flask server unless valid https://stackoverflow.com/questions/33783637/javascript-function-input-date-bigger-than-today-date — FLSte, Nov 13 '21 at 03:30

Is there a better way to keep the form in flask when reloading?

0 Answers0