0

Estoy usando este pluggin para guardar el celular de los usuarios a través de un formulario. Sin embargo, en base de datos solo se almacena el valor que se registra en el campo 'Phone' (sólo el número sin prefijo).

Quisiera saber si hay alguna forma de extraer el prefijo seleccionado y almacenarlo en la base de datos ya sea en un campo aparte o en el mismo campo con el número de celular:

En resumen, este código es el que está plasmado en mi formulario:

<!DOCTYPE html>
<html>
<head>
    <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>

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

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

const phoneNumber = phoneInput.getNumber();
    </script>
    
    </body>
    </html>

Agradezco su ayuda,

La función que hace aparecer la lista de prefijos es:

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

Y el valor que guarda el valor del préfijo + el número es:

getNumber()

Quisiera extraer ese getNumer() y almacenarlo en un campo tipo texto del formulario. (cabe aclarar que el formulario está contruido en php)

2
  • Hola. ¿Dónde exactamente está ese dato que dices querer guardar? ¿Con qué código estás intentando guardarlo? ¿Cuál es el problema o error? Pulsa en editar para completar tu pregunta.
    – A. Cedano
    Commented el 21 ene. 2022 a las 22:13
  • ¿Pero, qué devuelve getNumber() actualmente?
    – A. Cedano
    Commented el 21 ene. 2022 a las 22:58

2 respuestas 2

1

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>

2
  • Muchas gracias, súper claro
    – Dayana P
    Commented el 24 ene. 2022 a las 3:25
  • @DayanaPGaleano revisa la respuesta editada, he explicado cómo poner el código en un elemento de formulario (por si usas el mismo formulario para enviar los datos al servidor) y también explico cómo crear un objeto (en el caso de que uses Ajax o Fetch para pasar los datos al servidor). Puedes usar una u otra forma, según el caso. Es mucho mejor usar Ajax o Fetch, pero ese es otro asunto.
    – A. Cedano
    Commented el 24 ene. 2022 a las 17:20
0

Tuve el mismo problema, para armar una url para la api de whatsapp, lo solucione asi:

    <form action="#" method="post">       
        <label for="remite_tel">Teléfono del Remitente:</label><br>
        <input type="tel" id="remite_tel" name="remite_tel" required>
    </form>

    <script src="vendors/telinput/js/intlTelInput.js"></script>
    <script>
    
    function initializeTelInput(inputElement) {
        return window.intlTelInput(inputElement, {
            initialCountry: "pe",
            strictMode: true,
            useFullscreenPopup: false,
            utilsScript: "vendors/telinput/js/utils.js",
        });
    }
    
    const remiteTelInput = document.getElementById('remite_tel');
    const remiteTelInstance = initializeTelInput(remiteTelInput);
    
    remiteTelInput.addEventListener('blur', function() {
        const phoneNumber = remiteTelInstance.getNumber().replace('+', ''); 

        remiteTelInput.value = phoneNumber;
        
    });

</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.