How to pass default input value using for loop in a form using Jinja?

Question

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

I want my form to have a default value already taken from the backend. The {{ template.compound }} changes outside but doesn't change in the input section. Can someone please help me, where and what I am doing wrong?

Answer 1

The issue was related to using the same id for multiple input elements on the same page. The id for the compound input field is being generated dynamically using template.id, which is fine for uniqueness, but it's causing issues when the same template is used more than once on the same page(because of the for loop).

To solve this issue, I appended a unique identifier to the id value. One way to do this is by adding the template index to the id value. You can do this by using loop.index0 as unique identifier. Link for reference to the special jinja variables(see the answer).

<div class="modal fade" id="updateModal{{ loop.index0 }}" 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('updateRRF', id=template.id) }}">
      <div class="form-group">
        <label for="compound">Compound</label>
        <input type="text" class="form-control" id="compound{{ loop.index0 }}" name="compound" required value="{{ template.compound }}">
      </div>
<!--The code continues for the rest of inputs-->