Flask select onchange reverts to first option

Question

I'm writing a simple web app and to pick which workflow the user will use it starts with a drop-down. I'm using this page as a template for all other pages: base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet"
          href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <p>Ticket Type:
        <select onchange="if (this.value)window.location.href=this.value">
            <option value="{{ url_for('welcome') }}">Select an option...</option>
            <option value="{{ url_for('create_internal_user') }}">Create Internal Account</option>
            <option value="{{ url_for('create_external_user') }}">Create External Account</option>
        </select>
    {% block content %}
    {% endblock %}
</body>
</html>

So when the user selects an option, they're redirected to another page that is also using base.html as its template. The problem is that after the user selects an option, the drop down reverts to "Select an option...". How can I make the drop down reflect which page the user is on?

score 0 · Answer 1 · answered Mar 26 '21 at 12:06

Why do you want to show the Ticket Type in another page?

If you need to do that for some reason, then you need to add javascript that would pre-select the value on load in this given example or instead of using like so, I would use jQuery to see when changes are made to the option and would do the redirect+pre-select magic using jQuery. This could be easily achieved by using IDs on each option and based on e.g. current url or something similar.

$( "#ticket_type_changed" ).change(function() {
  alert("write you code to do that here");
});

Even if that's an option for you, you should not add this kind of functionality in base template as later on you might need to re-use base template for other pages and you will not need this Ticket Type feature, extract it, put to another template and use include feature (but first you need to think if you want to show this ticket type in all web pages that will extend base.html page)

While if you do not need it as you already navigated where you need and if you need to change it you can go to the starting page, I would:

base.html - add new block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet"
          href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    {% block ticket_type %}{% endblock %}
    {% block content %}
    {% endblock %}
</body>
</html>

And I would create a new template e.g. index.html where I would provide this information like so:

{% extends "base.html" %}
{% block ticket_type %}
    <p>Ticket Type:
        <select onchange="if (this.value)window.location.href=this.value">
            <option value="{{ url_for('welcome') }}">Select an option...</option>
            <option value="{{ url_for('create_internal_user') }}">Create Internal Account</option>
            <option value="{{ url_for('create_external_user') }}">Create External Account</option>
        </select>
{% endblock %}

Flask select onchange reverts to first option

1 Answers1