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>
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>