Prevent confirm form resubmission with flask - flask

Question

I have a flask app with a form. When the user submits the form, the data is saved and a different message is shown in place of the form. When the user refreshes the page, I get the confirm form resubmission message. I know that I need to use a redirect to avoid this, but I want the site to be one page, so I don't want to redirect to another. If I redirect to "/", then it works, but (as expected) the "thank you" message is not shown. Is it possible to keep the site as a single page, avoid the form resubmission message but still show the thank you message?
main.py
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
import forms
app = Flask(__name__)
app.config["SECRET_KEY"] = ""
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///test.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
db = SQLAlchemy(app)
class Booking(db.Model):
id = db.Column(db.Integer, primary_key=True)
first = db.Column(db.Text, nullable=False)
last = db.Column(db.Text, nullable = False)
telno = db.Column(db.Text, nullable=False)
message = db.Column(db.Text, nullable = False)
#app.route("/", methods = ["GET", "POST"])
def main():
filled = False
form = forms.BookingForm()
if form.validate_on_submit():
copy = dict(form.data)
del copy["submit"]
del copy["csrf_token"]
filled = True
db.session.add(Booking(**copy))
db.session.commit()
return render_template("formtest.html", form = form, filled = filled)
if __name__ == "__main__":
app.run(debug=True)
forms.py
from wtforms import validators
from wtforms.fields.html5 import TelField
from wtforms.validators import DataRequired
class BookingForm(FlaskForm):
first = StringField("First name", validators = [DataRequired()])
last = StringField("Last name", validators= [DataRequired()])
telno = TelField("Phone number", validators=[DataRequired()])
message = TextField("Please provide details of your appointment:", validators = [DataRequired()])
submit = SubmitField("Submit")
formtest.html
{% extends "base.html" %}
{% block head %}
<title>Booking form</title>
{% endblock %}
{% block body %}
{% if not filled %}
<form action = "/" method = "POST">
{{ form.hidden_tag() }}
<table>
<tr>
<td>{{ form.first.label }}</td>
<td>{{ form.last.label }}</td>
</tr>
<tr>
<td>{{ form.first() }}</td>
<td>{{ form.last() }}</td>
</tr>
<tr>
<td>{{ form.telno.label }}</td>
</tr>
<tr>
<td>{{ form.telno() }}</td>
</tr>
<tr>
<td>{{ form.message() }}</td>
</tr>
<tr>
<td>{{ form.submit() }}</td>
</tr>
</table>
</form>
{% else %}
<p>Thank you for your interest</p>
{% endif %}
{% endblock %}

Answer 1

Add below script in your html file.
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>

Answer 2

You could try to pass the filled parameter in the redirect call like this:
#app.route("/", methods = ["GET", "POST"])
def main():
form = forms.BookingForm()
filled = request.args.get('filled')
if filled is None:
filled = False
if form.validate_on_submit():
copy = dict(form.data)
del copy["submit"]
del copy["csrf_token"]
filled = True
db.session.add(Booking(**copy))
db.session.commit()
return redirect(url_for('main',filled=filled))
return render_template("formtest.html", form = form, filled = filled)