股票买卖应用中表单提交始终发送首个表单symbol值的问题求助

看起来你遇到的问题是所有Buy按钮都触发了同一个模态框，所以提交的自然是第一个股票的symbol值啦！

问题根源 #

你现在给所有模态框都用了同一个id="buy"，而Bootstrap的模态框是通过data-bs-target指向这个id来绑定的。当你用Jinja循环生成多个股票的按钮和模态框时，所有模态框的id重复了——浏览器只会识别第一个id对应的元素，不管你点哪个按钮，打开的都是第一个生成的模态框，提交的当然就是第一个表单里的symbol了。

解决方案 #

给每个模态框和对应的按钮设置唯一的id标识，比如利用股票的symbol来区分，这样每个按钮就会绑定到对应股票的模态框上。修改后的代码示例如下：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buy-{{ stock.symbol }}">Buy</button>

<!-- Modal -->
<div class="modal fade" id="buy-{{ stock.symbol }}" tabindex="-1" aria-labelledby="buyLabel-{{ stock.symbol }}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="buyLabel-{{ stock.symbol }}">Buy {{ stock.symbol }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{{ url_for('index') }}" method="post">
          <input type="hidden" name="symbol" value="{{ stock.symbol }}">
          <div class="form-group">
            <label for="buy-shares-{{ stock.symbol }}">Buy Shares</label>
            <input type="number" name="shares" id="buy-shares-{{ stock.symbol }}" class="form-control" required>
          </div>
          <input type="hidden" name="transaction_type" value="buy">
          <button type="submit" class="btn btn-primary">Buy</button>
        </form>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 按钮的data-bs-target改成了#buy-{{ stock.symbol }}，对应每个模态框的唯一id
• 模态框的id设置为buy-{{ stock.symbol }}，确保每个模态框都是唯一的
• aria-labelledby和模态标题的id也改成了buyLabel-{{ stock.symbol }}，既符合无障碍访问规范，又避免了id重复
• 输入框的id也改成了buy-shares-{{ stock.symbol }}，防止多个输入框id重复带来的潜在问题

这样修改后，每个Buy按钮都会打开对应股票的模态框，提交的表单自然就是当前股票的symbol值了。

备注：内容来源于stack exchange，提问作者Linh Chi Nguyen