Помогите разобраться с jQuery плагином int-tel-input

166

19 мая 2019, 14:40

Есть сайт с контактной формой, где есть поле ввода для телефона.

Моя задача - сделать так, чтобы в это поле ввода автоматически подтягивался международный телефонный код. Я решил реализовать задачу с помощью плагина int-tel-input

Фронтенд получился - код отображается, нужный код устанавливается по IP.

Моих знаний не хватает на бэкэнд. После добавления плагина, поле ввода поделилось на 2 части - отдельно выпадающий список и отдельно поле для ввода цифр.

И, соответственно, на почту мне приходят данные только с цифрами, а информации по коду и стране нет.

Я не прошу готового решения, объясните, пожалуйста, как это работает и в какую сторону копать.

P.S. Задача усложняется еще и тем, что сайт сделан на конструкторе Platforma LP, и я не могу влезть в код или настраивать их форму.

<div class="field" data-type="phone" style="width: 247px;"> 
  <div class="input"> 
    <div class="intl-tel-input allow-dropdown"> 
      <div class="flag-container"> 
        <div class="selected-flag" role="combobox" aria-owns="country-listbox" tabindex="0" title="Bhutan (འབྲུག): +975"> 
          <div class="iti-flag bt"></div> 
          <div class="iti-arrow"></div> 
        </div> 
        <ul class="country-list hide" id="country-listbox" aria-expanded="false" role="listbox" aria-activedescendant="iti-item-bt"> 
          <li class="country preferred" id="iti-item-us" role="option" data-dial-code="1" data-country-code="us"> 
            <div class="flag-box"> 
              <div class="iti-flag us"></div> 
            </div><span class="country-name">United States</span><span class="dial-code">+1</span></li> 
        </ul> 
      </div><input class="form-control text" type="text" data-placeholder="true" value="" style="border-radius: 15px;" autocomplete="off" placeholder="17 12 34 56"></div> 
  </div> 
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script> 
<script> 
        $("[data-type='text'] .input .form-control, [data-type='phone'] .input .form-control").intlTelInput({ 
           allowDropdown: true, 
           autoPlaceholder: "aggressive", 
           initialCountry: "auto", 
  geoIpLookup: function(success, failure) { 
    $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { 
      var countryCode = (resp && resp.country) ? resp.country : ""; 
      success(countryCode); 
    }); 
  }, 
}); 
    </script>