How to get select tag value in flask

Question

I have a total of two python scripts. One for the flask itself, and another for backend calculations. And I have an HTML file.

In backend.py:

def get_country():
    county_name = ["Bangladesh", "India", "USA"]
    country_default = "Bangladesh"
    return country_name, country_default

In flask_app.py:

import backend   
from flask import Flask
app = Flask(__name__) 
@app.route('/', methods=['GET', 'POST'])
    def home():
        country_name, country_default = backend.get_country()
        return render_template("index.html", country=county_name, default=country_default)

In index.html:

<form action="" class="form-text" method="GET">
    <div class="row">
        <div class="col-10">
            <select name="select_country" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                {% for country in country %}
                <option value="{{country}}">{{country}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-2">
            <button type="submit" class="btn btn-outline-primary">Select</button>
        </div>
    </div>
</form>
<p>You have selected {{default}}</p>

The questions I have here are:

1. How can I make the select tag in the HTML file to select the default value initially?
2. How can I submit the select tag value in the html file and update the country_default variable in the backend.py?

Answer 1

Answers to your questions:

1. You can declare the first option to be the default value using the selected attribute in the option tag. Then, you should remove the default value from the country_name.
2. You can submit the select tag in 2 ways, either using GET Method or POST Method.

Your index.html should looks like this:

<form action="/" class="form-text" method="GET/POST (Choose One)">
    <div class="row">
        <div class="col-10">
            <select name="select_country" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                <option value="{{default}}" selected>{{default}}</option>
                {% for country in country %}
                <option value="{{country}}">{{country}}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-2">
            <button type="submit" class="btn btn-outline-primary">Select</button>
        </div>
    </div>
</form>
<p>You have selected {{default}}</p>

Your backend.py should looks like this:

def get_country(default):
    county_name = ["Bangladesh", "India", "USA"]
    country_default = "Bangladesh"
    if default in country_name:
        country_default = default
    country_name.remove(country_default)
    return country_name, country_default

If you use GET Method, then it will redirect you to the "/" route with a query parameter (select_country). The route might look like this, "/select_country=(value_selected)". You can get the query parameter in flask using request.args.get(query_name). Your flask_app.py should look like this:

from backend import get_country
from flask import Flask, render_template
app = Flask(__name__) 

@app.route('/')
def home():
    country_name, country_default = get_country(request.args.get("select_country"))
    return render_template("index.html", country=county_name, default=country_default)

If you use POST Method, then it won't change the route. Therefore there wouldn't be any query parameters. You should instead use requests.form.get(name) to get the posted data. Your flask_app.py should look like this:

from backend import get_country
from flask import Flask, render_template
app = Flask(__name__) 

@app.route('/', methods=['GET', 'POST'])
def home():
    country_name, country_default = get_country(request.form.get("select_country"))
    return render_template("index.html", country=county_name, default=country_default)