如何知道我在烧瓶中单击了哪个按钮？答案

【问题标题】：How to know which button I clicked in flask?如何知道我在烧瓶中单击了哪个按钮？
【发布时间】：2013-09-28 14:11:07
【问题描述】：

我当前的项目，我的索引页面显示了几个种子，每个种子都有一个按钮来启动或停止种子。

我使用表单和循环创建页面，因此表单始终具有相同的名称。但我需要知道用户点击了哪个按钮才能知道要停止哪个种子！

这是模板：

{% block content %}
 <h1>Hello, {{user}} !</h1>

 {% for torrent in torrents %}
      <form action="/index" method="post" name="torrent">
           {{torrent.control.hidden_tag()}}
           <p><a href='/torrent/{{torrent.id}}'>{{torrent.name}}</a> is {{torrent.status}} and {{torrent.progress}} % finished. <input type="submit" value="Start / Stop">
           </p>
      </form>
  {% endfor %}

这里是视图：

  @app.route('/index', methods = ['GET', 'POST'])
  def index():
  user = 'stephane'

  torrents = client.get_torrents()

  # for each torrent, we include a form which will allow start or stop
  for torrent in torrents:
    torrent.control = TorrentStartStop()
    if torrent.control.validate_on_submit():
        start_stop(torrent.id)

return render_template("index.html", title = "Home", user = user, torrents = torrents)

那么，我如何知道用户想要停止/启动哪个种子？

【问题讨论】：

我们能看到hidden_tag的代码吗？
Thomas 是对的，因为您为每个种子打开一个表单，所以整个问题真的不存在，因为您可以简单地在隐藏字段中提交信息哈希。我的回答假定整个页面或列表使用单一形式。

标签： python flask wtforms flask-wtforms

【解决方案1】：

假设hidden_tag 创建了一个名称为torrent_id 的hidden 输入并为种子的ID 赋值，您将在request.form["torrent_id"] 中找到种子ID：

from flask import request

....
torrent_id = request.form["torrent_id"]

【讨论】：

hidden_tag 只是一个 csrf 保护标签。但我会根据你的建议尝试一些事情。
@22decembre 只需将 a 替换为 <input type="submit" name="torrent_id" value="{{ torrent.id }}"/> 即可。
好的，这样就解决了“点击了哪个按钮”的问题，顺便说一下，我了解了我不知道的按钮（我知道输入，而不是按钮）。但是现在事实是，由于循环，我得到的答案与内联的种子一样多！那么如何只启动一次功能呢？

【解决方案2】：

使用 HTML <button type="submit"> 元素并将value 设置为信息哈希，或设置包含信息哈希的formaction URL（formaction 仅适用于 HTML5）。

【讨论】：

【解决方案3】：

如果有人单击按钮并将其 css 类更改为活动按钮，则您可以使用 js 的活动按钮状态，然后检查哪个按钮处于活动状态并获取其信息。

这是js代码：

var btnContainer = document.getElementById("myDIV");

var btns = btnContainer.getElementsByClassName("btn");

for (var i = 0; i < btns.length; i++) {
 btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
 });
  }

这是用于按钮的 css ：

  .btn {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    }


   .active, .btn:hover {
    background-color: #666;
    color: white;
    }

【讨论】：