How to make a select option redirect you - Flask - Stack Overflow

I am trying to make a select option redirect you to another page in flask (eg. onclick="{{redirect('/')}}" but that code doesn't seem to work, error says redirect is not defined and same if I do Flask.redirect.) Here is my code:

{% extends "layout.html" %}

{% block title %}
    Record a run
{% endblock %}

{% block main %}
    <div class="container d-flex justify-content-center pt-3">
        <form action="/login" method="post">
            <label for="place">Location</label>
            <select class="form-select" name="place">
                <option selected value="">--Select a location--</option>
                {% if places %}
                    {% for place in places %}
                        <option value="{{ place }}">{{ place.name }}</option>
                    {% endfor %}
                {% endif %}
                <option value="" onclick="">--Add place--</option>
            </select>
            <hr>
            <div class="mb-3">
                <label for="distance">Distance ran (km)</label>
                <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="distance" placeholder="eg. 1.234" type="number" min=".001" step=".001">
            </div>
            <div class="mb-3">
                <hr>
                <span>Time</span>
                <hr>
                <label for="hours">Hours</label>
                <input class="form-control mx-auto w-auto" name="hours" placeholder="00" defaultValue="0" type="number" max="99" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="minutes">Minutes</label>
                <input class="form-control mx-auto w-auto" name="minutes" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="seconds">Seconds</label>
                <input class="form-control mx-auto w-auto" name="seconds" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <hr>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
{% endblock %}

I am trying to make a select option redirect you to another page in flask (eg. onclick="{{redirect('/')}}" but that code doesn't seem to work, error says redirect is not defined and same if I do Flask.redirect.) Here is my code:

{% extends "layout.html" %}

{% block title %}
    Record a run
{% endblock %}

{% block main %}
    <div class="container d-flex justify-content-center pt-3">
        <form action="/login" method="post">
            <label for="place">Location</label>
            <select class="form-select" name="place">
                <option selected value="">--Select a location--</option>
                {% if places %}
                    {% for place in places %}
                        <option value="{{ place }}">{{ place.name }}</option>
                    {% endfor %}
                {% endif %}
                <option value="" onclick="">--Add place--</option>
            </select>
            <hr>
            <div class="mb-3">
                <label for="distance">Distance ran (km)</label>
                <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="distance" placeholder="eg. 1.234" type="number" min=".001" step=".001">
            </div>
            <div class="mb-3">
                <hr>
                <span>Time</span>
                <hr>
                <label for="hours">Hours</label>
                <input class="form-control mx-auto w-auto" name="hours" placeholder="00" defaultValue="0" type="number" max="99" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="minutes">Minutes</label>
                <input class="form-control mx-auto w-auto" name="minutes" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="seconds">Seconds</label>
                <input class="form-control mx-auto w-auto" name="seconds" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <hr>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
{% endblock %}

• flask

Share Improve this question Follow asked Jan 2 at 13:45 Cian NeilandCian Neiland 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

There are multiple issues:

• redirect() is server-side Jinja code; you can't run it from JavaScript. You would have to use window.location.href = "url" in JS.
• HTML option elements don't support onclick; they're not actually rendered in the page. You should use the input event on the select and check for which option was used.{% extends "layout.html" %}
• The option to add a place should have a value.
• The select associated with the label should have an ID, which is also needed for JS.
• Use addEventListener which is today's fashion and prevents overriding existing listeners.

{% block title %}
    Record a run
{% endblock %}

{% block main %}
    <div class="container d-flex justify-content-center pt-3">
        <form action="/login" method="post">
            <label for="place">Location</label>
            <select class="form-select" name="place" id="place">
                <option selected value="">--Select a location--</option>
                {% if places %}
                    {% for place in places %}
                        <option value="{{ place }}">{{ place.name }}</option>
                    {% endfor %}
                {% endif %}
                <option value="add-place">--Add place--</option>
            </select>
            <hr>
            <div class="mb-3">
                <label for="distance">Distance ran (km)</label>
                <input autocomplete="off" autofocus class="form-control mx-auto w-auto" name="distance" placeholder="eg. 1.234" type="number" min=".001" step=".001">
            </div>
            <div class="mb-3">
                <hr>
                <span>Time</span>
                <hr>
                <label for="hours">Hours</label>
                <input class="form-control mx-auto w-auto" name="hours" placeholder="00" defaultValue="0" type="number" max="99" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="minutes">Minutes</label>
                <input class="form-control mx-auto w-auto" name="minutes" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <label for="seconds">Seconds</label>
                <input class="form-control mx-auto w-auto" name="seconds" placeholder="00" type="number" defaultValue="0" max="59" onkeydown="if(event.key==='.'){event.preventDefault();}"  oninput="event.target.value = event.target.value.replace(/[^0-9]*/g,'');">
                <hr>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
        </form>
    </div>
    <script>
      function checkOption(event) {
          if(event.currentTarget.value = "add-place") {
              window.location.href = '/';
          }
      }
      document.getElementById("place").addEventListener("input", checkOption);
    </script>
{% endblock %}