Не могу использовать Intl-тел-ввод в двух формах на одной странице - PullRequest
Новая
       16

Не могу использовать Intl-тел-ввод в двух формах на одной странице

1 голос
/ 03 апреля 2020

Эй, ребята, я пытаюсь использовать плагин для двух форм на одной странице, но на второй странице просто не загружается выпадающий список, это мой код ..

Это мой PHP Код: 

<style>.hide { display: none; }</style>
<div class="form-group col-md-12 phoneBlock">
    <input type="tel" id="phone_number" name ="phone_number" value="<?php echo $phone ?>" class="form-control">
    <span id="valid-msg" class="hide">Valid</span>
    <span id="error-msg" class="hide"></span>
    <input type="hidden" id="country" name ="country" value="<?php echo $country ?>">
    <input type="hidden" id="phone" name ="phone" value="<?php echo $phone ?>">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha256-S4gG40EfG9fszyLcPdnHxrARVtHCTLYxq3Lz4h5H93E=" crossorigin="anonymous"></script>
    <script src="tel/build/js/intlTelInput.js"></script>
    <script src="js/phone.js"></script>
</div>

А это мой JS файл. Я не знаю, как использовать javascript для двух форм на одной странице, любая помощь будет оценена !! Спасибо! 

var input = document.querySelector("#phone_number");
var country = document.querySelector("#country");
(errorMsg = document.querySelector("#error-msg")),
  (validMsg = document.querySelector("#valid-msg")),
  (btnSubmit = $("#btnSubmit"));

btnSubmit.attr("disabled", true);
// here, the index maps to the error code returned from getValidationError - see readme
var errorMap = [
  "Invalid number",
  "Invalid country code",
  "Too short",
  "Too long",
  "Invalid number"
];

var reset = function() {
  input.classList.remove("error");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

var iti = window.intlTelInput(input, {
  separateDialCode: true,
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      var countryCode = resp && resp.country ? resp.country : "";
      callback(countryCode);
    });
  },
  utilsScript: "tel/build/js/utils.js?1562189064761" // just for formatting/placeholders etc
});
input.addEventListener("countrychange", function(e) {
  country.value = iti.getSelectedCountryData().iso2.toUpperCase();
});

// on blur: validate
input.addEventListener("blur", function() {
  reset();

  if (input.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide");
      $("#phone").val(iti.getNumber());
      btnSubmit.attr("disabled", false);
    } else {
      input.classList.add("error");
      var errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide");
      btnSubmit.attr("disabled", true);
    }
  }
});

// on keyup / change flag: reset
input.addEventListener("change", reset);
input.addEventListener("keyup", reset);
...