How to write to an HTML page using Flask without refreshing the page?

Question

I'm recreating simple web apps to practice. In this website Password Generator, once you press generate password, the generated password will be inputted in the textbox. How do I do this in Flask? The solution I did was redirect to a new webpage containing only the password but I don't think it is a good design.

@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "GET":
    return render_template("index.html")
else:
    # Get the input values
    length = int(request.form.get("charnum"))
    numbers = bool(request.form.get("numbers"))
    symbols = bool(request.form.get("symbols"))
    lowercase = bool(request.form.get("lowercase"))
    uppercase = bool(request.form.get("uppercase"))
    similar = bool(request.form.get("excludeSimilar"))
    ambiguous = bool(request.form.get("ambiguous"))

    # Generate Password with the preceding conditions
    password = generate_pass(length, symbols, numbers, uppercase, lowercase, similar, ambiguous)
    return render_template("index.html", password=password)

it needs to use JavaScript - to generate password in JavaScript or to run request (AJAX) to get only generated password from separated function in Flask and put it in textbox. — furas
– furas, Commented Mar 26, 2022 at 11:26
I checked this page - it use JavaScript to generate passoword. — furas
– furas, Commented Mar 26, 2022 at 11:28

furas · Accepted Answer · 2022-03-26 17:41:26Z

2

It needs to use JavaScript to send AJAX request to server. Server can return only password (without HTML) and JavaScript has to put it in textbox.

But page from your link uses JavaScript to generate password directly in browser

Minimal working code which uses JavaScript to get values from FORM, send to server, get result from server and put password in FORM.

from flask import Flask, request, render_template_string
import random
import string

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == "POST":
        data = request.json

        lower_number = int(data.get('lower', 0))
        upper_number = int(data.get('upper', 0))

        password_lower = random.choices(string.ascii_lowercase, k=lower_number)
        password_upper = random.choices(string.ascii_uppercase, k=upper_number)

        password = password_lower + password_upper
        random.shuffle(password)  # change order of chars  (work in-place so doesn't need to assign to variable)

        return "".join(password)

    return render_template_string('''<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<form method="POST">
    Lower: <input type="text" id="lower_id" value="10" /><br/>
    Upper: <input type="text" id="upper_id" value="10" /><br/>
    <button type="submit" name="btn" onclick="generate();return false">GENERATE</button></br>
    <input type="text" id="password_id" /><br/>
</form>
<script>
var password = document.getElementById("password_id");
var lower_input = document.getElementById("lower_id");
var upper_input = document.getElementById("upper_id");

function generate() {
    fetch("/", {
        method: "POST",
        body: JSON.stringify({
            lower: lower_input.value,
            upper: upper_input.value,
        }),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },        
    })
    .then(response => response.text())
    .then(text => {password.value = text;})
}
</script>
</body>
</html>''')


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

EDIT:

In fetch I set

url "/",
method POST,
data converted to JSON,
content-type as JSON - so Flask can get it with request.json,
accept as JSON - to inform Flask that I expect response as JSON (but I don't respect it and in Flask I send normal text instead of JSON - so I could skip this header)

Because JavaScript uses asynchronous functions so fetch uses .then() to execute next function when it gets response from server. This function gets text/body from response. It also has to wait for result and it uses .then() to execute next function when it finally get text from response. And this function puts this text in <input> for password.

Mozilla: Using Fetch and Fetch API

edited Mar 26, 2022 at 17:41

answered Mar 26, 2022 at 11:47

furas

149k12 gold badges121 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Lorenz Inocentes Over a year ago

Can you explain what you did with fetch's body? And also can you point me to a resource to learn more about this. Thank you very much.

furas Over a year ago

Mozilla: Using Fetch and Fetch API

furas Over a year ago

I added some description to answer.

Nima Afshar · Accepted Answer · 2022-03-26 11:31:15Z

1

for real-time response in webpages, you must use javascript. you can either call your flask API with javascript (using tools like AJAX,...), then put the generated password in the textbox or implement your password generation algorithm in javascript.

answered Mar 26, 2022 at 11:31

Nima Afshar

5062 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to write to an HTML page using Flask without refreshing the page?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related