Get dial code and phone number from International Telephone Input using jQuery

Last Reply one month ago By dharmendr

Posted one month ago

how to get country code separately.

i gone through lot of article and blog but not able to get solution for jquery version to get dial code. i need this with jquery 3.4.1 not with vanilla js.

Any help is highly appriciated.

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
</head>
<script type="text/javascript">
	var code = "+91123456789"; // this value is dynamic coming from model.
    $('#phone').val(code);
	var dial code = // how to get dial code.
	 $('#submit').on('click', function () {
        alert( dial code +  ('#phone').val());
    });

$('#phone').intlTelInput({
        autoHideDialCode: true,
        autoPlaceholder: "ON",
        dropdownContainer: document.body,
        formatOnDisplay: true,
        hiddenInput: "full_number",
        initialCountry: "auto",
        nationalMode: true,
        placeholderNumberType: "MOBILE",
        preferredCountries: ['US'],
        separateDialCode: true
    });	
</script>
<body> 
    <input type="tel" id="phone" value=""> <input type="button" id="submit" /> 
</body>

Github link https://github.com/jackocnr/intl-tel-input

Posted one month ago

Hi yogesjoshi,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>International Telephone Input With Flags and Dial Codes</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var code = "+91123456789"; // Assigning value from model.
            $('#txtPhone').val(code);
            $('#txtPhone').intlTelInput({
                autoHideDialCode: true,
                autoPlaceholder: "ON",
                dropdownContainer: document.body,
                formatOnDisplay: true,
                hiddenInput: "full_number",
                initialCountry: "auto",
                nationalMode: true,
                placeholderNumberType: "MOBILE",
                preferredCountries: ['US'],
                separateDialCode: true
            });
            $('#btnSubmit').on('click', function () {
                var code = $("#txtPhone").intlTelInput("getSelectedCountryData").dialCode;
                var phoneNumber = $('#txtPhone').val();
                var name = $("#txtPhone").intlTelInput("getSelectedCountryData").name;
                alert('Country Code : ' + code + '\nPhone Number : ' + phoneNumber + '\nCountry Name : ' + name);
            });
        });
    </script>
</head>
<body>
    <input type="tel" id="txtPhone" />
    <input type="button" id="btnSubmit" value="Get Dial Details" />
</body>
</html>

Demo