Passing data from HTML form through Flask to an API

Question

So I'm currently making an application in Python that would show live departures and then show a countdown when there are 0 minutes to departure. What my issue is that I don't want to edit the code to change stops, I want to just be able to input the route_type and stop from the html formand then pass that via Flask to the API.

The API is the PTV Timetable API that includes real time departures. The API has a Swagger page so I know what to insert.

So what I've done is added the authentication code and then added the forms from bootstrap into the HTML file. I've tried googling the problem but I don't really know how the HTML forms can talk to flask so it can get added to the API. Thanks

Python Code

def getUrl(request):
DevId = <ID>
apikey = <KEY>
request = request + ('&amp;') if ('?' in request) else '?')
raw = 'request' +'DevId={0}'.format(DevId)
hashkey = hmac.new(key, raw, sha1)
signature = hashkey.hexdigest()
return ''https://timetableapi.ptv.vic.gov.au'+raw+'&amp;signature={1}'.format(devId, signature)

from_zone = tz.gettz('UTC')
to_zone = tz.gettz ('Australia/Melbourne')

#get next departures
url = getUrl('/v3/departures/route_type/{route_type}/stop/{stop_id}')


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

HTML Code

<body>
    <form>
      <div class="form-group">
        <label for="station-id-input">Station ID</label>
        <input type="text" class="form-control" placeholder="Station ID">
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inline-train" value="route_type0">
        <label class="form-check-label" for="inline-train">Train</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inline-tram" value="route_type1">
        <label class="form-check-label" for="inline-train">Tram</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inline-bus" value="route_type2">
        <label class="form-check-label" for="inline-train">Bus</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inline-vline" value="route_type3">
        <label class="form-check-label" for="inline-train">V/Line</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inline-nightbus" value="route_type4" disabled>
        <label class="form-check-label" for="inline-train"Night Bus (Not Implemented)</label>
      </div>
</body>

score 0 · Accepted Answer · answered Jul 24 '19 at 00:49

So a good and well documented way to communicate with flask from html is via flask wtforms. It helps you essentially to validate your forms in the html and to secure the POST requests from the frontend usually via a CSRF token.

From the documentation you have a minimal example that could be a good starting point for you:

from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    name = StringField('name', validators=[DataRequired()])

HTML

PS: The curling brackets are from jinja2, a templating language for python.

<form method="POST" action="/">
    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name(size=20) }}
    <input type="submit" value="Go">
</form>

Validating

@app.route('/submit', methods=('GET', 'POST'))
def submit():
    form = MyForm()
    if form.validate_on_submit():
        return redirect('/success')
    return render_template('submit.html', form=form)

It is fairly straightforward, you create a form, pass it to the frontend together in the routing and then when the user submits it it tries to validate it.

With all that said, if all you want is to simply send a form data and process that in flask, all you really need to do is create / accept POST requests in your endpoint:

@app.route('/', methods=('GET', 'POST'))
@app.route('home')
    def home():
        if request.method == 'POST':
           form = request.form
           value1 = form['value1']
           # do something with the values from the form.
        return flask.render_template('home.html')

I would not recommend due to validation / security concerns, but it could be a starting point if you are new to flask.

Passing data from HTML form through Flask to an API

1 Answers1

HTML

Validating