Question 43693 in Html Question posted in
Some basic documentation can be found here.

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

<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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    Use the default filter for that, this way the template.compund value is prevented from changing for the cell outside the input

    Here is your code modified:

    {% for template in rs_templates %}
<tbody>
<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 | default('') }}">
          </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 | default('') }}">
          </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 %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search