How do I print a user's input in a form onto the website screen

Question

I'm building a website in flask and python and I want to store the user's input in a variable, then output it onto the website screen.

This is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <div><h1>Home Page</h1>
    <p>Hello, {{ name }}</p>
    </div>

    <form>
        <label for="fname">Enter Sq. ft.</label><br>
        <input type="text" id="estimate" name="estimate" value="Ex. 1000"><br>
        <input type="submit" value="Calculate Estimate">
    </form>

    <a href="/my-link/">Click me</a>
</body>
</html>

and this is my python/flask code:

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route('/my-link/')
def my_link():
    temp = 0
    for i in range(10):
        temp = i

    return str(temp)

if __name__ == '__main__':
    app.run(debug=True, port=8000)

When I run this, this is what I see:

When I type in 54 and hit "Calculate Estimate", I don't understand why I get http://127.0.0.1:8000/?estimate=54 in my search bar, I don't understand why it's going there. How would I be able to get that 54 and just print it on the website screen?

Form elements submit their values to the domain by way of query parameters (as seen in your case). By default `form` uses `GET` to submit it's request. If you want to disable the submission, add a `onSubmit` handler and prevent the event from propagating. You'll also get access to your data this way. — Urmzd, Nov 10 '21 at 15:27
@collinsmarra The query parameters are encoded in `request.args`. More information can be found [here](https://stackoverflow.com/questions/10434599/get-the-data-received-in-a-flask-request) — Urmzd, Nov 12 '21 at 13:45

score 1 · Accepted Answer · answered Nov 12 '21 at 13:47

While I would recommend using POST if you're submitting sensitive data, GET suffices in your case.

To solve your issue, we have to first specify an action endpoint (by default, it's /, which loads too much responsibility onto one endpoint).

  <form action="/calculate-estimate">
      <label for="fname">Enter Sq. ft.</label><br>
      <input type="text" id="estimate" name="estimate" value="Ex. 1000"><br>
      <input type="submit" value="Calculate Estimate">
  </form>

Second, we need to create a FLASK endpoint to handle the form data.

@app.route("/calculate-estimate", methods=["GET"])
def calculate_estimate():
    estimate = request.args.get("estimate")
    ## Use your data however you desire.

This should be enough to solve your issue.

How do I print a user's input in a form onto the website screen

1 Answers1