Flask passing request.form value to url_for

user_8419619 0
Viewed 3781

I have a Flask template that displays a page with a dropdown list of owners, a table with the owner's win-loss record, and a radio to toggle between regular season record and playoff record.

The desired workflow is:

  1. If navigated to the page through the navigation bar, it should default to /matchup-history/regular. (this works)
  2. Else it should route accordingly whenever the radio is toggled. (this doesn't work)

matchup-history.html

{%- extends "base.html" -%}
{% block nav_matchups %}active{% endblock %}
{%- block content -%}
  <form action="{{ url_for('show_matchup_history', matchup_type=request.form['matchup_type']) }}" method="post">
    <label>
      <select name="owner_id" onchange="this.form.submit()">
      {%- for o in owners %}
        {%- if request.form['owner_id'] == o['owner_id']|string() %}
        <option value="{{ o['owner_id'] }}" selected>{{o['first_name'] + " " + o['last_name'] }}</option>
        {%- else %}
        <option value="{{ o['owner_id'] }}">{{o['first_name'] + " " + o['last_name'] }}</option>
        {%- endif %}
      {%- endfor %}
      </select>
    </label>
    {% block matchup_type_radio %}{% endblock %}
  </form>
  {%- if records|length > 0 %}
  <div class="stats-table">
    <table>
      <tr>
        {%- for th in table_headers %}
        <th>{{ th }}</th>
        {%- endfor %}
      </tr>
      {%- for r in records %}
      <tr>
        {%- for cn in column_names %}
        <td>{{ r[cn] }}</td>
        {%- endfor %}
      </tr>
      {%- endfor %}
    </table>
  </div>
  {%- endif %}
{% endblock -%}

matchup-history/regular.html

{%- extends "matchup-history.html" -%}
{% block matchup_type_radio %}
<label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()" checked>Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()">Playoffs</label>
{% endblock %}

matchup-history/playoffs.html

{%- extends "matchup-history.html" -%}
{% block matchup_type_radio %}
<label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()">Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()" checked>Playoffs</label>
{% endblock %}

app.py

@app.route('/matchup-history/<string:matchup_type>', methods=['GET', 'POST'])
def show_matchup_history(matchup_type):
    table_headers = ["Opponent", "Wins", "Losses"]
    column_names = ["opponent_owner_name", "wins", "losses"]
    owners = queries.get_owners()

    if request.method == 'POST':
        owner_id = request.form['owner_id']
    else:
        owner_id = owners[0]['owner_id']

    if matchup_type == REGULAR_SEASON:
        records = queries.get_matchup_history_regular(owner_id)
    else:
        records = queries.get_matchup_history_playoffs(owner_id)

    return render_template("matchup-history/{matchup_type}.html".format(matchup_type=matchup_type),
                           title='Matchup History', table_headers=table_headers, column_names=column_names,
                           owners=owners, records=records)

The page correctly loads /matchup-history/regular when clicked on, but fails whenever the radio button is toggled:

127.0.0.1 - - [20/Sep/2018 08:32:53] "GET /matchup-history/regular HTTP/1.1" 200 -
127.0.0.1 - - [20/Sep/2018 08:32:56] "POST /matchup-history/ HTTP/1.1" 404 -

It seems like request.form['matchup_type'] is empty when matchup-history.html is rendered, so submitting the form will not have the desired effect. How can I refactor to route url_for to different matchup_type?

Edit: Per @Joost's suggestion, I rethought the design.

matchup-history.html

{%- extends "base.html" -%}
{% block nav_matchups %}active{% endblock %}
{%- block content -%}
  <form action="{{ url_for('show_matchup_history') }}" method="get">
    <label>
      <select name="owner_id" onchange="this.form.submit()">
      {%- for o in owners %}
        <option value="{{ o['owner_id'] }}" {%- if o['owner_id'] == selected_owner %} selected {% endif %}>{{o['first_name'] + " " + o['last_name'] }}</option>
      {%- endfor %}
      </select>
    </label>
    <label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()" {%- if matchup_type == "regular" %} checked {% endif %}>Regular Season</label>
    <label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()"{%- if matchup_type == "playoffs" %} checked {% endif %}>Playoffs</label>
  </form>
  {%- if records|length > 0 %}
  <div class="stats-table">
    <table>
      <tr>
        {%- for th in table_headers %}
        <th>{{ th }}</th>
        {%- endfor %}
      </tr>
      {%- for r in records %}
      <tr>
        {%- for cn in column_names %}
        <td>{{ r[cn] }}</td>
        {%- endfor %}
      </tr>
      {%- endfor %}
    </table>
  </div>
  {%- endif %}
{% endblock -%}

base.html

...
<a href="{{ url_for('show_matchup_history') }}" class="{% block nav_matchups %}{% endblock %}">Matchups</a>
...

app.py

@app.route('/matchup-history', methods=['GET'])
def show_matchup_history():
    table_headers = ["Opponent", "Wins", "Losses"]
    column_names = ["opponent_owner_name", "wins", "losses"]

    matchup_type = request.args.get('matchup_type', default="regular")
    owner_id = request.args.get('owner_id', type=int)
    owners = queries.get_owners()

    if not owner_id:
        owner_id = owners[0]['owner_id']

    if matchup_type == REGULAR_SEASON:
        records = queries.get_matchup_history_regular(owner_id)
    else:
        records = queries.get_matchup_history_playoffs(owner_id)

    return render_template("matchup-history.html".format(matchup_type=matchup_type),
                           title='Matchup History', table_headers=table_headers, column_names=column_names,
                           matchup_type=matchup_type, selected_owner=owner_id, owners=owners, records=records)

Flow is now:

  1. Clicking on Matchups from navbar will route to /matchup-history and default to showing regular season matchups
  2. Clicking on Playoffs radio will route to /matchup-history?matchup_type=playoffs&owner_id=12345
  3. Clicking on Regular radio will route to /matchup-history?matchup_type=regular&owner_id=12345
  4. Clicking on a different owner in the dropdown will route to /matchup-history?matchup_type=regular&owner_id=98765
flask forms html python
1 Answers

So right now you are trying to access the request.form in a get request. However, the form will always be empty in a get request because that's the nature of a get request. So only when you access the route @app.route('/matchup-history/<string:matchup_type>' trough a post request, will it be able to redirect in the right way.

This working miniapp displays it nicely:

from flask import Flask, render_template_string, request
app = Flask(__name__)

TEMPLATE_STRING = """
    <form action="{{ url_for('index') }}" method="post">
    {{request.form['matchup_type']}}<br><br>
    <label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()" checked>Regular Season</label>
    <label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()">Playoffs</label>
    </form>
"""


@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'GET':
        return render_template_string(TEMPLATE_STRING)
    else:
        return render_template_string(TEMPLATE_STRING)

The first time you open the page, you see only the radio button. But as soon as you click on a radio button, it POSTS the form, and therefore you will see the selected value on top of the page now. If you click again, you post the form again, etc.

So how should you solve it? I think that there is no need to do a POST request with this form, because you're not updating any data, you're just querying.

    from flask import Flask, render_template_string, request
app = Flask(__name__)

TEMPLATE_STRING = """
    <form action="{{ url_for('history') }}" method="get">
    <select name="owner_id">
    {% for owner in owners %}
      <option {% if owner['id'] == selected_owner_id %} selected {% endif %}value="{{owner['id']}}">{{owner['name']}}</option>
     {% endfor %}
    </select>
    <label><input type="radio" name="matchup_type" value="regular" {%if selected_matchup_type == 'regular'%}checked{%endif%} onclick="this.form.submit()">Regular Season</label>
    <label><input type="radio" name="matchup_type" value="playoffs" {%if selected_matchup_type == 'playoffs'%}checked{%endif%} onclick="this.form.submit()"  >Playoffs</label>
    <br>Queried data goes here
    </form>
"""
owners = [{'id': 1, 'name': 'bob'}, {'id': 2, 'name': 'gary'}, {'id': 3, 'name': 'tom'}]
matchup_types = 'regular', 'playoffs'


@app.route('/history', methods=['GET'])
def history():
    owner_id = request.args.get('owner_id', None, type=int)
    if owner_id not in [owner['id'] for owner in owners]:
        owner_id = owners[0]['id']
    matchup_type = request.args.get('matchup_type', None)
    if matchup_type not in matchup_types:
        matchup_type = matchup_types[0]
    # now you know the owner_id and the matchup type, and know that both are valid, do some query to get table data
    return render_template_string(TEMPLATE_STRING, owners=owners,
                                  selected_owner_id=owner_id,
                                  selected_matchup_type=matchup_type,
                                  matchup_types=matchup_types)

I think this is what you need. The form is never posted, by always put as a get request (<form action="{{ url_for('history') }}" method="get">). If the values are missing or invalid, we default back to some owner/matchup_type. The checked values are remembered, and used to render the template.

This puts all you flask logic in the @app.route, and all your jinja logic in the template.

Some general remarks:

I think that accessing the request in jinja not preferable because jinja deals with errors/missing values differently, and if they are a result of logic related to your request, it's becomes hard to guess what's going on. So deal with the incoming request on the python side.

Instead of wrapping having 2 radio blocks depending on the chosen value, just use one block and check within the options if the are to one you need. <option {% if some_value == some_other_value %} checked {% endif%}>blabla</option>.

Do a lot more input validation! In your first example, you template name is decided by some user inputted value (the matchup type). But what if the user posts a nonexisting value? You get errors.

If the only difference between the two templates is which radio button is selected, you don't need two templates. See the updated version how to just deal with it in one template.

user_93359640
Related