不能在同一页面中以两种形式使用 Intl-tel-input

Posted 2023-05-09

【中文标题】不能在同一页面中以两种形式使用 Intl-tel-input

【英文标题】：Cant use Intl-tel-input in two forms in the same page

【发布时间】：2020-07-15 04:29:48

【问题描述】：

大家好，我正在尝试在同一页面中为两个表单使用插件，但在第二页上根本没有加载下拉列表，这是我的代码..

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

【问题讨论】：

在 HTML 中不允许重复 ID，否则您将面临类似的问题，您需要重构代码以适应两个不同的 ID，例如 #phone_number 和 #phone_number2 无处不在 - css 选择器、变量引用, 事件处理程序等

HTML 中的 php 回显代码应以分号结尾 <?php echo $phone ?> 应为 <?php echo $phone; ?> 或 <?=$phone?>。

@dalelandry PHP 块中的最后一条语句不需要分号

【参考方案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]);
    );
);