Skip to main content
se añadieron 1806 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Si tú quieres pasar esos datos al servidor, puedes ponerlos en un elemento del formulario, o crear un objeto y pasarlos al servidor vía Ajax.

Por ejemplo:

var input = document.querySelector("#phone");
var ibxCode = document.querySelector("#ibxCode");

var iti = window.intlTelInput(input, {
  separateDialCode: true,
  utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
});

window.iti = iti;

document.getElementById("btnSubmit").addEventListener("click", function(e) {
  e.preventDefault();
  const phoneNumber = iti.getNumber();
  const activeItem = iti.activeItem.dataset;
  ibxCode.value = activeItem.dialCode;

  /*
    Si es para mandarlo por Ajax o Fetch
    construyes un objeto como este
    y lo mandas. Y en el servidor los recuperas
    usando las claves de la izquierda:
    ibxCode y phone
  */
  var mData = {
    ibxCode: activeItem.dialCode,
    phone: input.value
  };
  console.log(mData);


  console.log(phoneNumber);
  console.log(activeItem.dialCode);

});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.js"></script>


<form>
  <input id="phone" type="tel" name="phone" />
  <input id="ibxCode" type="number" name="ibxCode" placeholder="Código de País" readOnly disabled/>

  <input id="btnSubmit" type="submit" class="btn" value="Verify" />
</form>

Si tú quieres pasar esos datos al servidor, puedes ponerlos en un elemento del formulario, o crear un objeto y pasarlos al servidor vía Ajax.

Por ejemplo:

var input = document.querySelector("#phone");
var ibxCode = document.querySelector("#ibxCode");

var iti = window.intlTelInput(input, {
  separateDialCode: true,
  utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
});

window.iti = iti;

document.getElementById("btnSubmit").addEventListener("click", function(e) {
  e.preventDefault();
  const phoneNumber = iti.getNumber();
  const activeItem = iti.activeItem.dataset;
  ibxCode.value = activeItem.dialCode;

  /*
    Si es para mandarlo por Ajax o Fetch
    construyes un objeto como este
    y lo mandas. Y en el servidor los recuperas
    usando las claves de la izquierda:
    ibxCode y phone
  */
  var mData = {
    ibxCode: activeItem.dialCode,
    phone: input.value
  };
  console.log(mData);


  console.log(phoneNumber);
  console.log(activeItem.dialCode);

});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.js"></script>


<form>
  <input id="phone" type="tel" name="phone" />
  <input id="ibxCode" type="number" name="ibxCode" placeholder="Código de País" readOnly disabled/>

  <input id="btnSubmit" type="submit" class="btn" value="Verify" />
</form>

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

El problema es que tú estás llamando a getNumber() sobre un objeto phoneInput que no existe, pues tú llamase al objeto: iti.

Luego, si te interesa el código del país, examinando el objeto, podrás ver que se encuentra dentro de una propiedad llamada activeItem que tiene a su vez un dataset con dos propiedades: dialCode (que es el valor que te interesa) y country-code que es el código del país.

Este es un ejemplo, de lo obtenido haciendo un console.log(iti);: `

"activeItem": 
  <li class="iti__country iti__preferred iti__active"   
      tabindex="-1" id="iti-0__item-us-preferred"
      role="option" 
      data-dial-code="1" 
      data-country-code="us" aria-selected="true">
      ...

Sabiendo eso, puedes obtener el código del país por separado accediendo al dataset que se encuentra en activeItem y obteniendo la propiedad dial-code del mismo.

Por ejemplo:

var input = document.querySelector("#phone");
var iti = window.intlTelInput(input, {
  separateDialCode: true,
  utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
});

// store the instance variable so we can access it in the console e.g. window.iti.getNumber()
window.iti = iti;

document.getElementById("btnSubmit").addEventListener("click", function(e) {
  e.preventDefault();
  const phoneNumber = iti.getNumber();
  console.log(phoneNumber);
  const activeItem = iti.activeItem.dataset;
  console.log(activeItem.dialCode);

});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/intlTelInput.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/js/intlTelInput.js"></script>


<form>
  <input id="phone" type="tel" name="phone" />
  <input id="btnSubmit" type="submit" class="btn" value="Verify" />
</form>