如何使选择选项重定向你 - Flask

Question

我试图让一个选择选项将您重定向到 Flask 中的另一个页面（例如。

onclick="{{redirect('/')}}"

，但该代码似乎不起作用，错误说重定向未定义，如果我执行 Flask.redirect 则相同。）这是我的代码：

{% 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 %}

Answer 1

存在多个问题：

• redirect()

  是服务器端 Jinja 代码；你不能从 JavaScript 运行它。你必须在 JS 中使用

  window.location.href = "url"

  。
• HTML

  option

  元素不支持 onclick；它们实际上并未在页面中呈现。您应该在选择上使用

  input

  事件并检查使用了哪个选项。{% extends "layout.html" %}
• 添加地点的选项应该有一个值。
• 与标签关联的select应该有一个ID，这也是JS所需要的。
• 使用

  addEventListener

  ，这是当今的时尚，可以防止覆盖现有的侦听器。

{% 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 %}