CODEWITHSUNDEEP
jqueryjquery-pluginsintl-tel-input
Anket Patel
Anket Patel

Reputation: 21

How can we get contry code from given number Using IntlTelInput plugin?

var givenNumber = "+918288889889";

Using IntlTelInput plugin how can we get the contry code of "given number" ?

Upvotes: 2

Views: 8652

Answers (3)

NicoXiang
NicoXiang

Reputation: 436

If you don't need a dialcode but a country code.

After enter the phone number in intltelinput, get the country code from this line below. 

var countrycode = document.getElementsByClassName('country active')[0].getAttribute("data-country-code")

Update answer:

Using 3rd party api like numverify is a good option. Scroll to the bottom of the page, you'll see the example in js. And if you insist on using the data in your db, i think it's necessary to write backend code(like php) by yourself. 

// set endpoint and your access key
var access_key = 'YOUR_ACCESS_KEY';
var phone_number = '14158586273';

// verify phone number via AJAX call
$.ajax({
    url: 'http://apilayer.net/api/validate?access_key=' + access_key + '&number=' + phone_number,   
    dataType: 'jsonp',
    success: function(json) {

    // Access and use your preferred validation result objects
    console.log(json.valid);
    console.log(json.country_code);
    console.log(json.carrier);

    }
});

Upvotes: 0

Hamza Abdaoui
Hamza Abdaoui

Reputation: 2209

From the documentation here, you can use a method named getSelectedCountryData like this : 

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

Witch will return something like this:

{
  name: "Afghanistan (‫افغانستان‬‎)",
  iso2: "af",
  dialCode: "93"
}

Then you can process that data like this : 

var countryCode = countryData.dialCode;

The above line will give you the country dial code.

Upvotes: 1

Chandra Kumar
Chandra Kumar

Reputation: 4205

Just use this code to get country code from phone number:

You can use var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;

Here is demo: https://output.jsbin.com/cuvoqagotu

https://jsbin.com/cuvoqagotu/edit?html,css,js

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
<style>
 .hide {
    display: none;
 }
</style>
</head>
<body>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">? Valid</span>
<span id="error-msg" class="hide">Invalid number</span>
</body>
</html>

JS:

var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({
utilsScript:"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.4/js/utils.js"
});

var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};

// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
      /* get code here*/
      var getCode = telInput.intlTelInput('getSelectedCountryData').dialCode;
      alert(getCode);
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});

// on keyup / change flag: reset
telInput.on("keyup change", reset);

Upvotes: 1

Related Questions