Как поменять этот скрипт чтоб маска работала на всех формах?

Question

[VPVPVP]

У меня мультиязычный сайт с помощью плагина Polylang,формы выведены шорткодами,на одной странице находиться 2 формы.
Подключена маска для intl-tel-input
На первом языке всё ок,всё работает корректно,на всех остальных языках вылазит ошибка.
Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
Хотя инпут в котором нужно вкл. маску указан корректно.

Как нужно изменить скрипт ниже,чтоб избежать этой ошибки?
PS: я плохо разбираюсь в JS и делал по колхозному,т.е у меня 2 языка на сайте и 4 формы по факту,я в каждой из форм менял ID инпута и делал 4 дубля скрипта ниже,так как была ошибка что обрабатывается только первый инпут. Ну т.е у меня 4 дубля где я меня меняется var phoneInputID = "input#uafoot";

$(document).ready(function() {
  var phoneInputID = "input#uafoot";
  var input = document.querySelector(phoneInputID);
  var iti = window.intlTelInput(input, {
    formatOnDisplay: true,
    hiddenInput: "full_number",
    preferredCountries: ['ua'],

  });

  $(phoneInputID).on("countrychange", function(event) {

    // Get the selected country data to know which country is selected.
    var selectedCountryData = iti.getSelectedCountryData();

    // Get an example number for the selected country to use as placeholder.
    newPlaceholder = intlTelInputUtils.getExampleNumber(selectedCountryData.iso2, true, intlTelInputUtils.numberFormat.INTERNATIONAL),

      // Reset the phone number input.
      iti.setNumber("");

    // Convert placeholder as exploitable mask by replacing all 1-9 numbers with 0s
    mask = newPlaceholder.replace(/[1-9]/g, "0");

    // Apply the new mask for the input
    $(this).mask(mask);
  });



  iti.promise.then(function() {
    $(phoneInputID).trigger("countrychange");
  });

});

Answer 1

[ForSureN1]

Потому что у вас querySelector - берет первый элемент на странице,используйте querySelectorAll - чтобы получить массив всех элементов

Comments

[VPVPVP]

Вы уже когда то подсказывали этот вариант,но я просто сделал дубль скрипта и оно работало,до введения нового языка. Как использовать querySelectorAll я не в курсе,если просто меняешь на ALL ничего не работает

[ForSureN1]

VPVPVP, потому что вы получаете МАССИВ с инпутами, чтобы сделать с ним какое либо из действий, нужно для начала перебрать его циклом for, либо же если не хотите заморачиваться, создайте одну функцию, и вызывайте ее инлайновым способом.

[Валентин Попов]

Может так:

var phoneInputID = "input#uafoot";
  var input = document.querySelectorAll(phoneInputID);

input.forEach((input) => {
      var iti = window.intlTelInput(input, {
             formatOnDisplay: true,
              hiddenInput: "full_number",
              preferredCountries: ['ua'],
     });
     $(input).on("countrychange", function(event) {

    // Get the selected country data to know which country is selected.
    var selectedCountryData = iti.getSelectedCountryData();

    // Get an example number for the selected country to use as placeholder.
    newPlaceholder = intlTelInputUtils.getExampleNumber(selectedCountryData.iso2, true, intlTelInputUtils.numberFormat.INTERNATIONAL),

      // Reset the phone number input.
      iti.setNumber("");

    // Convert placeholder as exploitable mask by replacing all 1-9 numbers with 0s
    mask = newPlaceholder.replace(/[1-9]/g, "0");

    // Apply the new mask for the input
    $(this).mask(mask);
  });

iti.promise.then(function() {
    $(input).trigger("countrychange");
  });

});

Вам явно надо использовать querySelectorAll. А так вы сейчас работаете только с одним полем и второе поэтому не работает.

Answer 2

[IvanZhukov]

// Drop list phone code 
document.querySelectorAll(".phone_drop_list").forEach(element=> {
window.intlTelInput(element, {
    preferredCountries: ["ru", "us"],
  initialCountry: "RU",
  });

});

forEach-ем проходимся. Т.е. это все элементы с классом .phone_drop_list находящиеся на странице будут будут учтены и Drop list phone code будет работать