'I am creating a disappearing text web app using Flask and jquery. If the user stops typing for 10 seconds the input field should reset

Here is what I have so far I used jquery to reset the timer each time the user hits a key. I can't seem to get the field to reset or for the user to be redirected to a different page when the time runs out. Any help would be greatly appreciated.

 from time import *
from flask import Flask, render_template, redirect, url_for, flash, abort, request, jsonify
import sys

app = Flask(__name__)
app.secret_key = "This-is-a-secret-key"

#Todo 4: create timer
global timer_on
timer_on = False
global count_down
count_down = 10

@app.route('/timestart')
def Turn_timer_on(flash_message):
    global count_down
    global timer_on
    timer_on = False
    count_down = 10
    return render_template('index.html')

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


@app.route('/time', methods=['GET'])
def Timer():
    global timer_on
    global count_down
    if count_down <= 0:
        return redirect(url_for('times_up'))
    else:
        timer_on = True
        print('timer')
        while timer_on:
            if count_down > 0:
                sleep(1)
                count_down -= 1
                print(count_down)
            elif count_down <= 0:
                print('time is up')
                flash('True')
                timer_on = False
                return render_template('index.html', flash_message=True)

        return render_template('timesup.html')

@app.route('/')
def index():
    return render_template('index.html', flash_message=False)

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="/static/vendor/jquery.js"></script>
    <script src="/static/styles.css"></script>
</head>
<body>
<script>
    $(document).ready(function(){
        $("input").keypress(function(){
            $.getJSON('/timestart/{{ flash_message }}');
  });
});
</script>
<script>
    $(document).ready(function(){
        $("input").keyup(function(){
            $.getJSON('/time');
  });
});
</script>
<script>
    $(document).ready(function() {
      if ("{{ flash_message }}" === "True") {
        $("type_test").reset();
      };
    });
  </script>
<form id="type_form">
    <input id="type_test" type="text" size="200" name="type_test" class="input_box">
</form>

</body>

I have tried to use flask to redirect to a different page as well as just reload the page when the time runs out but neither seems to work. Also tried to drop a false statement in that would initiate a reset of the form using javascript.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'I am creating a disappearing text web app using Flask and jquery. If the user stops typing for 10 seconds the input field should reset

Sources

Related Questions