Jinja循环表单默认值不更新问题排查

希望表单加载后端返回的默认值，目前表格行中{{ template.compound }}等字段能正常显示对应条目内容，但点击Update按钮弹出的模态框内，输入框的默认值不会随所选条目变化，代码如下：

<tbody>
{% for template in rs_templates %}
   <tr>
      <th scope="row">{{template.id}}</th>
      <td>{{ template.compound }}</td>
      <td>{{template.strength}}</td>
      <!--update template code-->
      <td>
         <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#updateModal">Update</button>
      </td>
<!-- Update Template Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="updateModalLabel">Update Existing Template</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{{ url_for('updateRS', id=template.id) }}">
          <div class="form-group">
            <label for="compound">Compound</label>
            <input type="text" class="form-control" id="compound{{ template.id }}" name="compound" required value="{{ template.compound }}">
          </div>
          <div class="form-group">
            <label for="strength">Strength</label>
            <input type="text" class="form-control" id="strength{{ template.id }}" name="strength" required value="{{template.strength}}">
          </div>
          </div>
          <!-- Add other form fields for v1 - v7, label_claim, and per_unit -->
          <button type="submit" class="btn btn-danger">Update Template</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}

问题原因及解决办法 #

核心问题 #

1. 模态框ID重复：循环中每个条目都生成了ID为updateModal的模态框，HTML要求ID必须唯一，点击按钮时只会触发第一个匹配的模态框，导致显示的始终是第一条数据的默认值。
2. 按钮与模态框绑定不匹配：所有按钮的data-target都指向同一个#updateModal，无法关联到对应条目的模态框。
3. 标签与输入框关联失效：模态框内的<label>的for属性值（如compound）和输入框的ID（如compound{{template.id}}）不匹配，导致点击标签无法聚焦对应输入框。

修改方案 #

• 给每个模态框的ID添加模板ID后缀，确保唯一性，比如updateModal{{template.id}}
• 对应按钮的data-target同步修改为这个唯一ID
• 修正<label>的for属性，使其与输入框ID一致

修改后的代码 #

<tbody>
{% for template in rs_templates %}
   <tr>
      <th scope="row">{{template.id}}</th>
      <td>{{ template.compound }}</td>
      <td>{{template.strength}}</td>
      <!--update template code-->
      <td>
         <!-- 修改data-target为唯一模态框ID -->
         <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#updateModal{{template.id}}">Update</button>
      </td>
<!-- Update Template Modal -->
<!-- 修改模态框ID为唯一值 -->
<div class="modal fade" id="updateModal{{template.id}}" tabindex="-1" aria-labelledby="updateModalLabel{{template.id}}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- 修改模态框标题ID为唯一值 -->
        <h5 class="modal-title" id="updateModalLabel{{template.id}}">Update Existing Template</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{{ url_for('updateRS', id=template.id) }}">
          <div class="form-group">
            <!-- 修改label的for属性，匹配输入框ID -->
            <label for="compound{{template.id}}">Compound</label>
            <input type="text" class="form-control" id="compound{{ template.id }}" name="compound" required value="{{ template.compound }}">
          </div>
          <div class="form-group">
            <!-- 修改label的for属性，匹配输入框ID -->
            <label for="strength{{template.id}}">Strength</label>
            <input type="text" class="form-control" id="strength{{ template.id }}" name="strength" required value="{{template.strength}}">
          </div>
          <!-- Add other form fields for v1 - v7, label_claim, and per_unit -->
          <button type="submit" class="btn btn-danger">Update Template</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}
</tbody>

内容的提问来源于stack exchange，提问作者Yusharth Singh