International phone input issue

Question

I am trying to implement the "international phone input" on the registration process.

I have the css file: /css/intlTelInput.css

And the js file: /js/intlTelInput.js

This is the html:

<div class="form-group" id="phone-group" style="display:none;">
    <label><%= l('Phone number') %></label>
    <input id="phone" name="phone" type="tel">
  </div>

<script src="/js/intlTelInput.js"></script> 
<link rel="stylesheet" href="/css/intlTelInput.css">

And the script function:

var phone_intl = document.querySelector("#phone");
  window.intlTelInput(phone_intl, {
    utilsScript: "/js/utils.js"
  });

But it doesn't appear as it should. I have tried to implement this solution: https://intl-tel-input.com/. Do you have any idea what might be wrong or if you have another idea for what I want. Thank you!

Answer 1

Try this

const input = document.querySelector("#phone");
intlTelInput(input, {
    // any initialisation options go here
    utilsScript: /js/intltelinputNew/utils.js /* path here */
});