[FIXED] Unable to recieve value from form when using select input

Issue

I have a simple form that lets a user submit two types of IDs: one they input themselves and one that should submit a value according to a selection they make on a form input.

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        heroes = requests.get(f"{BASE_URL}/heroes").json()
        return render_template("index.html", heroes=heroes)
    else:
        steam32_id = request.form.get('steam32_id')
        hero_id = request.form.get('hero_id')

        return {"steam32_id": steam32_id, "hero_id": hero_id}

<form method="post" action="{{ url_for('index') }}">
        <label for="steam32_id">Steam ID</label>
        <input type="text" id="steam32_id" name="steam32_id"> <br>

        <label for="hero_list">Select Hero</label>
        <select id="hero_list" name="hero_list">
            {% for hero in heroes %}
            <option value={{ hero.id }}>{{ hero.localized_name }}</option>
            {% endfor %}
        </select> <br>

        <input type="submit" value="Submit">
    </form>

When trying to recieve hero[id] it currently outputs null

{
  "hero_id": null, 
  "steam32_id": ""
}

regardless of what hero the user selects.

I am obviously misunderstanding something; any guidance is much appreciated.

For reference, I am using OpenDota's API.

Solution

I realised I was trying to access the wrong field in the select field, and such field didn't even exist in my code either.

I realised that name of the select input is what I needed, as opposed to the value inside option.

<select id="hero_list" name="hero_id">
    {% for hero in heroes %}
        <option value={{ hero.id }} >{{ hero.localized_name }}</option>
    {% endfor %}
</select>

I simply renamed the name field inside the select input.

Answered By - Jake Jackson