5

I'm using intlTelInput on my site. How can I separate dial code using brackets. For ex. default output of this plugin is +1202someNumber and I need (+1)202someNum?

Pawel Novikov
  • 465
  • 1
  • 11
  • 26
  • Can you create a Js Fiddle for this? We would also need to check the telinput plugin to see if it has any info in the functions which would help us find out thwere the string needs to be cut off. – Manuel Cheța Mar 23 '17 at 17:12
  • this is an official page of this project - http://intl-tel-input.com/ – Pawel Novikov Mar 23 '17 at 17:20

5 Answers5

13

Based on the docs form here - https://github.com/jackocnr/intl-tel-input - you would need something like this:

var intlNumber = $("#phone").intlTelInput("getNumber"); // get full number eg +17024181234
var countryData = $("#phone").intlTelInput("getSelectedCountryData"); // get country data as obj 

 var countryCode = countryData.dialCode; // using updated doc, code has been replaced with dialCode
countryCode = "+" + countryCode; // convert 1 to +1

var newNo = intlNumber.replace(countryCode, "(" + coountryCode+ ")" ); // final version
Prabakaran T
  • 31
  • 7
Manuel Cheța
  • 480
  • 2
  • 10
2

Using vanilla JS, you can try as following:

var country_code = iti.getSelectedCountryData()["dialCode"];
var number_with_code = iti.getNumber();
var mod_number = "(" + number_with_code.substr(0, country_code.length + 1) + ")" + number_with_code.substr(country_code.length + 1);

The first line fetches the country code. The second line gets the complete number along with the country code.

Let's say, user types the following number:

+921234567890

Then, following would be the values of the variables:

country_code = "92"

number_with_code = "+921234567890"

and finally, the result:

mod_number = "(+92)1234567890"

In this example, iti refers to the plugin instance which gets returned when you initialise the plugin e.g. var iti = intlTelInput(input)

Hatim
  • 417
  • 6
  • 8
1

You don't add the country phone code directly to the input, you just attache it when the user submit the form or save it in another hidden input and attache it on you server side:

https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/hidden-input.html?phone=32445&phone-full=%2B132445

You can also display it to the users so they will understand they don't need to type it when they typing:

https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/national-mode.html

Roy Shoa
  • 3,117
  • 1
  • 37
  • 41
1

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);
Chandra Kumar
  • 4,127
  • 1
  • 17
  • 25
0

this give you country code

exmaple : 

$("#your input box id").intlTelInput("getSelectedCountryData")

// this give you object where dialCode property has country code,like below 

$("#ContactpermanentNumber").intlTelInput("getSelectedCountryData").dialCode
smartrahat
  • 5,381
  • 6
  • 47
  • 68
ravi kumar
  • 1
  • 1