Assign a variable from HTML input to Python/Flask

Question

I have an app that uses a variable to to locate a row in a pandas dataframe. I want the user to use the input[type=range] in html to select a year that will be used as the variable x.

Here is my python file:

from flask import Flask, render_template, request

app = Flask(__name__)

x = '2005'
mask = (df['start'] < x) & (df['end'] > x) 
output = df.loc[mask]

@app.route("/")
def home():
    return render_template("index.html", output=output)

Here is my html form:

<form name="myform" method="POST">
  <input type="range" name="yearInputName" id="yearInputId" value="1980" min="1880" max="2010">
</form>

How do I assign the variable x to the output of the form? So when a user selects the year 2007 for example, in the python file the variable x will change to '2007'?

Answer 1

Use request.form.get() to access data from a form with method POST.

Something like:

from flask import Flask, render_template, request

app = Flask(__name__)

def calculate(year):
    mask = (df['start'] < x) & (df['end'] > year) 
    return df.loc[mask]

@app.route("/",  mothods=['POST', 'GET'])
def home():
    try:
        input_year = request.form.get('yearInputName')
    except:
        input_year = '2005' # Default

    # You may wish to add some validation for input_year here.

    output = calculate(input_year)
    return render_template("index.html", output=output)

Answer 2

If I understood you correctly, you basically want to change the actual python file base on the user input. Probably not. Because multiple users will have separate input. Here's the things you might want(or might help you) regardless of what I understood.

To get the input from a post request -

Simply use request.form.get('name') to get the data.

Furthermore here.

You might want to use JavaScript to send post data.

Try this-

var element = document.getElementById('yearInputId')
var xhr = new XMLHttpRequest()
xhr.open('/url') \\the route you want this data to handle
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send("year=" + element.value)

You may want to store the year in a database or session variable

See using db with flask & using sessions

Storing in a session variable might do the work if you don't want to store the year but just as temporally.

If you want to serve '/' based on the post request

#check if request method is post
if request.method == 'POST':
    year = request.form.get('year') #change year to your html post variable name
    return render_template("index.html", output=year)
else if request.method == 'GET':
    return render_template("index.html", output=output)

and yes, make sure to enable post request in the route.

@app.route('/', mothods=['POST', 'GET'])

Advices -

1. You probably want to make a separate route for the post data to process.
2. Use database or sessions depending on your goal. When serving future requests, just the parse the year. You may need to store a unique identifier. Like username or browser cookie along with the year.
3. Use JavaScript if you're updating something just locally.