На сайте вызывается 2 формы,вторая форма не работает как починить?

Question

[VPVPVP]

В общем,у меня на сайте WP одна и та же форма отображается в двух местах,в модальном окне и в футере. В поле телефона вставлен International Telephone Input (выбор страны и маска телефона) ,первая форма работает,во второй форме пустота в поле телефона,я так понимаю потому что,что то вызывается несколько раз или в чем дело? Форма используется Contact Form7
Как это вообще поправить?
1 форма-

2 форма-

Comments

[ForSureN1]

Прикрепи код как маска подключается, там возможно берется один элемент, попробуй первую форму закоментить, и посмотри, появится ли маска у второй

[VPVPVP]

ForSureN1, если закомментить то на второй работает, это я уже пробовал.

Маска подключается так

$(document).ready(function() {
  var phoneInputID = "input#phone";
  var input = document.querySelector(phoneInputID);
  var iti = window.intlTelInput(input, {
    // allowDropdown: false,
    // autoHideDialCode: false,
    // autoPlaceholder: "off",
    // dropdownContainer: document.body,
    // excludeCountries: ["us"],
    formatOnDisplay: true,
    // geoIpLookup: function(callback) {
    //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
    //     var countryCode = (resp && resp.country) ? resp.country : "";
    //     callback(countryCode);
    //   });
    // },
    hiddenInput: "full_number",
    // initialCountry: "auto",
    // localizedCountries: { 'de': 'Deutschland' },
    // nationalMode: false,
    // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
    // placeholderNumberType: "MOBILE",
    //preferredCountries: ['es'],
    // separateDialCode: true,

  });


  $(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");
  });

});

[ForSureN1]

VPVPVP, Вся проблема в том , что вы используете
var input = document.querySelector(phoneInputID);
querySelector - берет только первый элемент из всех возможных,
вам нужно использовать querySelectorAll , но у вас не получится на input повесить обработчик так как эта переменная будет принимать в себя nodeList, вам нужно циклом for, ну или любым удобным для вас перебрать эту переменную, и уже на input[i] вешать обработчик

[VPVPVP]

ForSureN1, если бы еще понимать как это сделать)спасибо,попробую.

[ForSureN1]

VPVPVP, попробуйте найти готовое решение в интернете

[Александр Соболев]

вангую, что js выбирает нужный инпут по id, и естественно останавливается на первой форме. Вам нужно что-то вроде jQuery(document).find('#ид_или_класс').each( ...
или например document.querySelectorAll().. нужно выбрать все элементы

[ForSureN1]

VPVPVP, По идеи вам всего то нужно пару строчек поменять

[ForSureN1]

VPVPVP, Попробуйте загрузить ваши формы в codepen вместе со скриптом и минимальными стилями, попробую помочь вам

Answer 1

[ThunderCat]

Простое/тупое решение: Сдублируйте код, поменяйте во второй форме айдишник поля на phone1, и поменяйте var phoneInputID = "input#phone1";.

Comments

[VPVPVP]

так сразу и сделал