Get the full number using intlTelInput

Question

I am using the demo code for intlTelInput provided here

I am able to get the dial code using following

var intlNumber = $("#phone").intlTelInput("getSelectedCountryData");

But i am not able to get the full number i.e. "dialcode + number entered by user" from the #phone text box.

Answer 1

Use the getnumber option, so in your case:

var intlNumber = $("#phone").intlTelInput("getNumber");

^ This will give you the entire number (country code + phone number)

See docs here.

Answer 2

You have to use the built-in methods for getting the full number but you must add the utilsScript

 $("#phone").intlTelInput(
    { 
      //Other configurations,
      //Other configurations,
      utilsScript : "/path/to/build/utils.js",

    });

in the initialization for the intlTelInput as stated here Intl-Tel-Phone Docs

and then you can get the full number by using

$("#YourInputElementID").intlTelInput("getNumber");

Answer 3

The full_phone is gonna do the trick.
It will append a hidden field with full number when submitting the form.

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

updated: if the above trick didn't work then don't worry you can fix it by putting a hidden input field before the phone input field.

HTML:

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

var iti = window.intlTelInput(input, {
  nationalMode: true,
  utilsScript: "../../build/js/utils.js" 
});

var handleChange = function() {
hidden.value = iti.getNumber()
};

// listen to "keyup", but also "change" to update when the user selects a country

input.addEventListener('change', handleChange);
input.addEventListener('keyup', handleChange)

Answer 4

Submitting form with ajax . This worked for me. I added the hiddenInput : "full_phone" and change the even listener from "submit" to "change" in the intlTelInput.js file

 var iti = document.querySelector("#phone");
  window.intlTelInput(iti, {
    separateDialCode: true,
    hiddenInput : "full_phone",
    utilsScript: "../../build/js/utils.js",
  });

In the intlTelInput.js file

 if (this.telInput.form) this.telInput.form.addEventListener("change", this._handleHiddenInputSubmit);

Answer 5

Another option is to simply use getInstance and then getNumber

var input = document.querySelector("#phone"),
window.intlTelInput(input, {
      utilsScript : "/path/to/build/utils.js",
  });
window.intlTelInputGlobals.getInstance(input).getNumber();