Флаг Django DTL для контактного номера не работает

У меня есть поле с именем contact. и я добавляю код страны и флаг. В модели insert они успешно добавляются. Но в модели Edit он не добавляется, поскольку я использую DTL(for) для получения данных в текстовом вводе.

Я пытался поместить скрипт после текстового ввода с помощью тега script, но он все равно не работает. Для редактирования у меня есть пользовательский цикл DTL for loop, чтобы я мог вывести выбранные данные в текстовый ввод, чтобы пользователь мог редактировать свои данные.

Here is a screenshot of the Insert model.

Вставьте модель

Here is a screenshot of the edit model where the flag is not working

Редактирование модели

Here is my code.

{% 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' uid=vr.id bid=adduser.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 smsForm">
                  <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label>
                  <input type="tel" class="form-control" name="smsno" id="smsno" 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>
              <!--Form End-->
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">
                Close
              </button>
              <button 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 %}

code for country code and flag in javascript

        const phoneInputField = document.querySelector("#smsno");
    const phoneInput = window.intlTelInput(phoneInputField, {});
    window.addEventListener('load', function () {
      // Get the forms we want to add validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
    $(document).ready(function () {
      $('.smsForm .iti__flag-container').click(function () {
        var countryCode = $('.smsForm .iti__selected-flag').attr('title');
        var countryCode = countryCode.replace(/[^0-9]/g, '');
        $('#smsno').val("");
        $('#smsno').val("+" + countryCode + $('#smsno').val());
      });
    });

Вернуться на верх