php - Submit form without refresh and make content appear on a page after POSTing

Question

I want to post a comment, save its content inside of my database file "commet.db" in table "commets" and make it appear right after on my page without refreshing it. I'm currently using flask to POST but it seems impossible to do it without refreshing. Here's the Flask code:

db = SQL("sqlite:///comment.db")
@app.route("/", methods=["GET", "POST"])
def index():
    site=”/”
    if request.method == "POST":
        name = request.form.get('btn')
        if name == 'comment':
            username = session['username']
            tz = pytz.timezone('Asia/Almaty')
            date = datetime.now(tz)
            message = request.form.get('message')
            db.execute("INSERT INTO comments (user_id, date, message, site) VALUES (:user_id, :date, :message, :site)",
            user_id=username, date=date, message=message, site=site)
            return redirect(site)
   if request.method == "GET":
       comments = db.execute("SELECT * FROM comments WHERE site = :site ORDER BY date DESC", site=site)
       return render_template(comments=comments, site=site) 

HTML form code:

<form id="comment" style="padding-bottom: 20px" action={{ site }} method='post' onsubmit="return check(this)">
    <textarea class="textarea-width" style='resize: none; height: 6em; margin-top:1em' name='message' id='message'></textarea><br>
    <button name="btn" value="comment" style='margin-top: 10px' type='submit'>Comment</button>
</form>
<script>//do not post if null
    function check(form){
        if (form.message.value.trim() == ""){
            return false;
        }
    }
</script>

Here is how comment looks in HTML:

{% for comment in comments %}
<div class="container">
    <div class="row">
        <h4 class="username">{{ comment.user_id }} <em class="comment-date">{{ comment.date }}</em> </h4>
        <form id='myForm' action={{ site }} method='post'>
        <input name='ID' value={{ comment.id }} style="visibility: hidden; position: relative; width: 0; height: 0">
        <button class="minimalism" id="btn" name="btn" type="submit"  value="commentlike"><i class="fas fa-chevron-up"></i></button>
        <q id="result1" value={{ comment.comment_karma }} style=" padding-left: 10px; padding-right: 10px;">{{ comment.comment_karma }}</q>
        <button class="minimalism " id="btn" name="btn" type="submit" value="commentdislike"><i class="fas fa-chevron-down"></i></button>
        </form>
    </div>
</div>

<p class="comment-body">{{ comment.message }}</p>
<hr style="margin-top: -15px">
{% endfor %}

I already was trying to post through ajax, but I don't know how to query my DB file, and I'm not too familiar with PHP. I would really appreciate it if you could help me

question from:https://stackoverflow.com/questions/65949593/submit-form-without-refresh-and-make-content-appear-on-a-page-after-posting

Answer 1

Waitting for answers