表单的发布请求将空的ImmutableMultiDict返回给Flask

Question

我正在从网页发送请求：

<script>
  function sendGenre() {
    let form = document.getElementById("genreForm");
    form.value = document.getElementById("genre").value;
    console.log(form.value);
    form.submit();
  }
</script>

  <form class="adminPlaylistMainForm" action="createlist" id="genreForm" method="POST">
    <div class="playlistGenre">
      <p>From what genre ?</p>
      <select class="adminPlaylistGenreButton" id="genre">
        <option value="all">All</option>
        <option value="jazz">Jazz</option>
        <option value="punk">Punk</option>
        <option value="rock">Rock</option>
      </select>
      <p><input type="button" onclick="sendGenre();" value="Send form" /></p>
    </div>
  </form>

后端是：

@app.route('/createlist', methods=['POST', 'GET'])
def create_list():
    if request.method == "POST":
        print("/createlist request.method == POST")
        print(request.form)
    return render_template("tools/createlist.html")

函数中的console.log（form.value）打印值，console.log（form）打印完整的<form>及其内容，但是在后端的终端中，我得到了：

/createlist request.method == POST
ImmutableMultiDict([])

你知道是什么问题吗？

Answer 1

问题是您如何提交表单。您需要将名称属性添加到select标签。像这样：<select class="adminPlaylistGenreButton" id="genre" name="genre">