Jquery International Telephone number input

javascript jquery

25,163

Solution 1

Ok I solved this problem. So basically here are the option fields that must be true and we need to place the below script before </head> tag.

Script:

<script>
$(function() {
$("#mobile-number").intlTelInput({
allowExtensions: true,
autoFormat: false,
autoHideDialCode: false,
autoPlaceholder: false,
defaultCountry: "auto",
ipinfoToken: "yolo",
nationalMode: false,
numberType: "MOBILE",
//onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
//preferredCountries: ['cn', 'jp'],
preventInvalidNumbers: true,
utilsScript: "lib/libphonenumber/build/utils.js"
});
});
</script>

Place it before closing head tag and remember to call $("#mobile-number").intlTelInput(); as it is important.

Solution 2

You just forget to put your jquery code inside de document.ready.

see below:

$(document).ready(function(){
    $("#mobile-number").intlTelInput({
        //allowExtensions: true,
        //autoFormat: false,
        //autoHideDialCode: false,
        //autoPlaceholder: false,
        //defaultCountry: "auto",
        //ipinfoToken: "yolo",
        //nationalMode: false,
        //numberType: "MOBILE",
        //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        //preferredCountries: ['cn', 'jp'],
        //preventInvalidNumbers: true,
        utilsScript: "lib/libphonenumber/build/utils.js"
    });
});

Solution 3

Country code will always be in input field with this code

$("#mobile-number").on("blur keyup change", function() {
if($(this).val() == '') {
    var getCode = $("#mobile-number").intlTelInput('getSelectedCountryData').dialCode;
    $(this).val('+'+getCode);
}});
$(document).on("click",".country",function(){
    if($("#phone").val() == '') {
        var getCode = $("#mobile-number").intlTelInput('getSelectedCountryData').dialCode;
        $("#mobile-number").val('+'+getCode);
}});

25,163

Author by

Abhishek Singh

Updated on August 18, 2022

Comments

Abhishek Singh 3 months

I am trying to follow jquery tutorial on http://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html to create input type number with country code in a form. However, in my case though flag is appearing to change, the country code is not added inside the input field as they show in the demo.

Following is the code they have provided:

<head>
<meta charset="utf-8">
<title>International Telephone Input</title>
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link rel="stylesheet" href="build/css/demo.css">
</head>
   <body>
<form>
  <input id="mobile-number" type="tel">
  <button type="submit">Submit</button>
</form>
<!-- Load jQuery from CDN so can run demo immediately -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.js"></script>
<script>
  $("#mobile-number").intlTelInput({
    //allowExtensions: true,
    //autoFormat: false,
    //autoHideDialCode: false,
    //autoPlaceholder: false,
    //defaultCountry: "auto",
    //ipinfoToken: "yolo",
    //nationalMode: false,
    //numberType: "MOBILE",
    //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
    //preferredCountries: ['cn', 'jp'],
    //preventInvalidNumbers: true,
    utilsScript: "lib/libphonenumber/build/utils.js"
  });
</script>

Here is the link where I am trying to implement it: https://www.easyaccom.com/mobile/verifynumber.html

I have tried changing the commented out options in script but it doesn't help.