Country code flag icon is not showing on form in for loop

Question

Country code flag icon is not showing on form in for loop

Closed this issue 3 years ago · 1 comments

I am trying to getting flag icon on every edit form of each datatable row have edit button. but unfortunately I can see flag icon only in 1st row of edit form of datatable grid. and in other rows I am not able to see flag icon. Can you help us how can I modified my javascript so I can see flag icon on every edit form of each row of datatable.

NOTE : We have code is in Django Python and the variable is in DTL (djnango Template Language)

Datatable Code:

                  <span class="dt-checkbox-label"> </span>
                </div>
              </th>
              <th>Department Name</th>
              <th>Name</th>
              <th>SMS No.</th>
              <th>WhatsApp No.</th>
              <th>Email</th>
              <th>Country</th>
              <th>City</th>
              <th>Zip Code</th>
              <th>Activity</th>
            </tr>
          </thead>
          <tbody>
            {% for vr in adduser.adduser.all %}
            <tr>
              <td></td>
              <td>{{vr.dept_nm}}</td>
              <td>{{vr.f_name}} {{vr.l_name}}</td>
              <td>{{vr.sms_no}}</td>
              <td>{{vr.whtsp_no}}</td>
              <td>{{vr.e_mail}}</td>
              <td>{{vr.country}}</td>
              <td>{{vr.city}}</td>
              <td>{{vr.zip}}</td>
              <td>
                <a href="#userEditModal-{{forloop.counter}}" data-toggle="modal" class="btn btn-primary" onclick="getCountryCode()"><span
                    class="fa fa-pencil"></span> Edit</a>
                <a href="{% url 'deleteuser' id=vr.id %}" class="btn btn-danger"
                  data-target="success-modal-delete"><span class="fa fa-trash"></span> Delete</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

HTML Code :

Edit Form :

{% for vr in adduser.adduser.all %}
<div class="modal fade" id="userEditModal-{{forloop.counter}}" tabindex="-1" role="dialog"
  aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <form method="POST" action="{% url 'edituser' vr.id %}" class="needs-validation" novalidate>
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">Edit Contact Data</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 Start-->

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="FirstName">First Name<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="firstname" id="firstname"
                placeholder="Type FirstName here...." value="{{vr.f_name}}" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            <div class="form-group col-md-6">
              <label for="LastName">Last Name<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="lastname" id="lastname"
                placeholder="Type LastName here...." value="{{vr.l_name}}" required />
            </div>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">Please fill out this field.</div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="Address">Address Line1<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="addln1" id="addln1"
                placeholder="Type Address here...." value="{{vr.add_ln1}}" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
            <div class="form-group col-md-6">
              <label for="Address">Address Line2</label>
              <input type="text" class="form-control" name="addln2" id="addln2"
                placeholder="Type Address here...." value="{{vr.add_ln2}}" />
            </div>
          </div>

          <div class="form-row">

            <div class="form-group col-md-4">
              <label for="Country">City<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="city" id="city" placeholder="Type city here...."
                required value="{{vr.city}}" />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>

            <div class="form-group col-md-4">
              <label for="Country">Country<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="country" id="country"
                placeholder="Type Country here...." value="{{vr.country}}" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>



            <div class="form-group col-md-4">
              <label for="Country">Zip Code<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="zip" id="zip" placeholder="Type zipcode here...."
                value="{{vr.zip}}" required />
            </div>
            <div class="valid-feedback">Valid.</div>
            <div class="invalid-feedback">Please fill out this field.</div>
          </div>



          <div class="form-row">

            <div class="form-group col-md-6 smsForm_edit">
              <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label>
              <input type="tel" class="form-control" name="smsno_edit" id="smsno_edit" value="{{vr.sms_no}}"
                placeholder="SMS No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please enter valid contact no.</div>
            </div>
            <div class="form-group col-md-6 whatsappForm_edit">
              <label for="contact2">WhatsApp No.<span style="color:#ff0000">*</span></label>
              <input type="text" class="form-control" name="whtspno_edit" id="whtspno_edit" value="{{vr.whtsp_no}}"
                placeholder="WhatsApp No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please enter valid contact no.</div>
            </div>
          </div>

          <script>
            
           
          const phoneInputField_edit = document.querySelector("#smsno_edit");
          const phoneInputField2_edit = document.querySelector("#whtspno_edit");
          const phoneInput_edit = window.intlTelInput(phoneInputField_edit, {});
          const phoneInput2_edit = window.intlTelInput(phoneInputField2_edit, {});
      
          $(document).ready(function () {
            $('.smsForm_edit .iti__flag-container').click(function () {
              var countryCode = $('.smsForm_edit .iti__selected-flag').attr('title');
              var countryCode = countryCode.replace(/[^0-9]/g, '');
              $('#smsno_edit').val("");
              $('#smsno_edit').val("+" + countryCode + $('#smsno_edit').val());
            });
            $('.whatsappForm_edit .iti__flag-container').click(function () {
              var countryCode = $('.whatsappForm_edit .iti__selected-flag').attr('title');
              var countryCode = countryCode.replace(/[^0-9]/g, '');
              $('#whtspno_edit').val("");
              $('#whtspno_edit').val("+" + countryCode + $('#whtspno_edit').val());
            });
          });
         </script>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="email">Email<span style="color:#ff0000">*</span></label>
              <input type="email" class="form-control" name="email" id="email" placeholder="Type email here...."
                value="{{vr.e_mail}}" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" required />
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please enter valid email address.</div>
            </div>
            <div class="form-group col-md-6">
              <label for="Department">Department Name<span style="color:#ff0000">*</span></label>

              <select class="form-control" name="deptnm" id="deptnm" required readonly>
                <option>{{vr.dept_nm}}</option>
              </select>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Broadcast list<span style="color:#ff0000">*</span></label>

              <input type="text" class="form-control" id="brdctlst" name="brdctlst" value="{{adduser.brl_name}}"
                readonly>
              
              </select>
              <div class="valid-feedback">Valid.</div>
              <div class="invalid-feedback">Please fill out this field.</div>
            </div>
          </div>
          <!--Form End-->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>
          <button href="{% url 'broadcastlist' %}" id="UpdateUser" type="submit" class="btn btn-primary">Update</button>
        </div>
      </form>
      <div class="alert alert-info" style="display: none;"></div>

    </div>
  </div>
</div>
{% endfor %}


<!--Edit Model End From Here-->

Answer 1 · 2022-07-04T09:34:49.000Z

Hello @KrupaVasava

I didn't get you point.
please give me a codepen demo so I can understand your issue.

Thank you.