不能在同一页面中的两个表单中使用Intl-tel-input

Question

嘿，伙计们，我正试着在同一页的两个表单中使用插件，但是在第二页根本没有加载下拉菜单，这是我的代码。

这是我的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);

Answer 1

元素的ID必须不同。我是这样做的：

function runIntlTelInputAndGeoIp(element, countryCallback) {
    let $countrySelect = $(element).parents('form').find("select[name='country']"),
        initialCountry = ($countrySelect.length > 0 && $countrySelect.val()) ? $countrySelect.val().toLowerCase() : "auto",
        defCountry     = 'GB';

    if (element === undefined) {
        if (typeof countryCallback === "function") {
            countryCallback(defCountry);
        }
        return;
    }

    let iti = intlTelInput(element, {
        allowDropdown: true,
        customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
            // return selectedCountryPlaceholder.replace(/[()\s-]/g, '');    //to show National phone number without spaces and any symbols (only +)
            return "+" + selectedCountryData.dialCode; //to show only country dialCode with plus
        },
        autoHideDialCode: false,
        initialCountry: initialCountry, //"auto",
        nationalMode: true,
        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        preferredCountries: [],
        // placeholderNumberType: "MOBILE",
        separateDialCode: false,
        autoPlaceholder: 'off',
        utilsScript: "/js/intl-tel-input/utils.js?v=8.12.11"
    });
    iti.promise.then(function () {
        let countryCode = iti.getSelectedCountryData().iso2 || defCountry;
        if (typeof countryCallback === "function") {
            countryCallback(countryCode.toUpperCase());
        }
    });
    return iti;
}
$(function() {
   $("input[name='phone']").each(function () {
       runIntlTelInputAndGeoIp($(this)[0]);
    });
});