CODEWITHSUNDEEP
pythonhtmlselectflaskjinja2
MVS
MVS

Reputation: 75

Having a select option stay selected after POST with Flask

I'm trying to get a select option that is selected to stay after the page refresh using Flask. I have attempted to do so with Jinga2, but it's is not working:

<div class="col-sm-4 col-lg-4 col-md-4">
    <select class="form-control" id="myselect" name="thing" required>
        <option value="" {% if thing=='' %} selected {% endif %} ></option>
        <option value="Foo" name="Foo" id="Foo" {% if thing =="Foo" %} selected {% endif %}>Foo</option>
        <option value="Bar" name="Bar" id="Bar" {% if thing =="Bar" %} selected {% endif %}>Bar</option>
    </select>
</div>

Where the variable energy is populated and passed through with Python. After looking into this, I feel that this is the way to make this work in Flask, though apparently not. Any assistance would be appreciated!

@app,route('/things', methods=['POST']
def things()
    if len(facts['thing']) > 11:
        energy = [facts['thing'][0:8],facts['thing'][9:]]
    else:
        energy = [facts['things']]
    ...
    return render_template('thing.html', thing=energy)

Upvotes: 6

Views: 10900

Answers (3)

idbrii
idbrii

Reputation: 11916

The important part is rendering the page with selected in your desired option:

<option value="Foo" selected>Foo</option>

double_j's answer to use templates to insert it into your html works great, but if you're building the dropdown from a list it may be easier to build your html from python:

import flask
import socket

app = flask.Flask(__name__)

all_things = ['Foo', 'Bar', 'Fizz', 'Buzz']
current_thing = None
def show_selection(target):
    if target == current_thing:
        return 'selected'
    else:
        return ''

def menu():
    template = '''<form action = "things" method = "post">
    <select id="target" name="target">
    {targets}
    </select>
    <input type="submit" name="build" value="Build">
</form>
    '''
    # vvv This is the important part vvv
    targets = [f'<option value="{t}" {show_selection(t)}>{t}</option>' for t in all_things] 
    return template.format(
        targets='\n'.join(targets)
    )
    # ^^^ This is the important part ^^^

@app.route('/things', methods=['GET', 'POST'])
def things():
    global current_thing
    current_thing = flask.request.form.get('target')
    page = menu()
    if flask.request.method == 'POST' and 'build' in flask.request.form:
        page += f'Building {current_thing}'
    else:
        page += 'Press Build button'
    return page


if __name__ == '__main__':
    PORT = 8080
    print("Visit http://{}:{} to trigger builds".format(socket.gethostname(), PORT))
    app.run(host='0.0.0.0', port=PORT, debug=True)

Upvotes: 0

suresh varma
suresh varma

Reputation: 27

try this, if you have not already

{% if thing == "Foo" %}
    <option value = "Foo" name ="Foo" id="Foo" selected>Foo</option>
    <option value = "Bar" name ="Bar" id="Bar">Bar</option>
{% elif thing == "Bar" %}
    <option value = "Foo" name ="Foo" id="Foo">Foo</option>
    <option value = "Bar" name ="Bar" id="Bar" selected>Bar</option>
{% endif %}

Upvotes: -1

double_j
double_j

Reputation: 1706

Please see this example as it works for what you're trying to do. I can't exactly debug what's going wrong in your code because you've provided me with parts and I don't know what they're doing.

Folder structure

Test
|___templates
|   |___things.html
|___Test.py

things.html

<form method="post">
    <div class="col-sm-4 col-lg-4 col-md-4">
        <select title="thing" class="form-control" id="myselect" name="thing" required>
            <option value="" {% if thing=='' %} selected {% endif %} ></option>
            <option value="Foo" name="Foo" id="Foo" {% if thing =="Foo" %} selected {% endif %} >Foo</option>
            <option value="Bar" name="Bar" id="Bar" {% if thing =='Bar' %} selected {% endif %}>Bar</option>
        </select>
        <button type="submit">SEND</button>
    </div>
</form>

Test.py

from flask import Flask, render_template, request

app = Flask(__name__)
PORT = 5000


@app.route('/things', methods=['GET', 'POST'])
def things():
    """
    Accepts both GET and POST requests. If it's a GET request,
    you wouldn't have a last selected thing, so it's set to an
    empty string. If it's a POST request, we fetch the selected
    thing and return the same template with the pre-selected
    thing.
    You can improve on this and save the last selected thing
    into the session data and attempt to retrieve it from there.
    """
    thing = ''
    if request.method == 'GET':
        return render_template('things.html', thing=thing)
    else:
        thing = request.form.get('thing', '')
        return render_template('things.html', thing=thing)


if __name__ == '__main__':
    app.run(port=PORT)

Upvotes: 9

Related Questions