{"id":3310,"date":"2018-06-07T19:35:49","date_gmt":"2018-06-07T19:35:49","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3310"},"modified":"2019-01-17T20:52:21","modified_gmt":"2019-01-17T20:52:21","slug":"international-telephone-input-with-country-flags-dial-codes-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/","title":{"rendered":"International Telephone Input with Country Flags and Dial Codes using jQuery"},"content":{"rendered":"

Telephone number input field<\/b> is a commonly used field in the web form where the user can provide their contact info. If the web form is available internationally, the country code is mandatory for the telephone input. Because the dial code will be different for the different country. In this case, the user needs to enter the phone number with their country code. You can add dial code dropdown to the telephone input field to allows the user to select their country code without typing manually.<\/p>\n

Displaying country flag and international dial code makes the telephone number input user-friendly. You can easily add the country code select box with national flags to input field using jQuery. In this tutorial, we will show you how to implement international telephone input field with national flags and dial codes dropdown list using jQuery<\/b>.<\/p>\n

The International Telephone Number Input<\/b> field is a simple jQuery plugin to add a dropdown list to the input field. It will list all the country names, national flags and international dial codes on the telephone input field. This plugin is very useful when you need to provide a telephone input field for international users.<\/p>\n

CSS<\/h2>\n

Include the stylesheet file of the intlTelInput plugin, it will style the international telephone input dropdown list.<\/p>\n

<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"css\/intlTelInput.css\"<\/span>><\/span><\/pre>\n
HTML<\/h2>\n
Add an input field to accept the telephone input from the user. The country code dropdown list will be added to this HTML element.<\/p>\n
<input<\/span> type<\/span>=\"tel\"<\/span> id<\/span>=\"phone\"<\/span>><\/span><\/pre>\n
JavaScript<\/h2>\n
Include the JS library of International Telephone Input plugin.<\/p>\n
<script<\/span> src<\/span>=\"js\/intlTelInput.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n
Use the intlTelInput()<\/b> method to initialize the International Telephone Input plugin. It will replace an HTML input element with dial code dropdown list and country flags.<\/p>\n
<script<\/span>><\/span>\nvar<\/span> input = document<\/span>.querySelector(\"#phone\"<\/span>);\nwindow<\/span>.intlTelInput(input);\n<\/script<\/span>><\/span><\/pre>\n
Basic Uses<\/h2>\n
The following example code snippet adds international telephone dial codes select box to the input field. Use utilsScript<\/code> option and specify the utils.js<\/code> script URL to enable the international formatting or validation.<\/p>\n
var<\/span> input = document<\/span>.querySelector(\"#phone\"<\/span>);\nintlTelInput(input, {\n    utilsScript: \"js\/utils.js\"<\/span>\n});<\/pre>\n
Set Initial Country Based on IP address<\/h2>\n
Use initialCountry with the geoIpLookup<\/code> option to set a default country dial code based on the user’s IP address.<\/p>\n
For this advance feature of International Telephone Input plugin, you need to include jQuery library.<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n
Set the initialCountry<\/code> option to auto<\/code> and specify a custom function in the geoIpLookup<\/code> option. Use the ipinfo.io service that will lookup the user’s country based on their IP address and set the initial dial code in the telephone input.<\/p>\n
var<\/span> input = document<\/span>.querySelector(\"#phone\"<\/span>);\nintlTelInput(input, {\n    initialCountry: \"auto\"<\/span>,\n    geoIpLookup: function<\/span>(success, failure<\/span>) <\/span>{\n        $.get(\"https:\/\/ipinfo.io\"<\/span>, function<\/span>(<\/span>) <\/span>{}, \"jsonp\"<\/span>).always(function<\/span>(resp<\/span>) <\/span>{\n            var<\/span> countryCode = (resp && resp.country) ? resp.country : \"\"<\/span>;\n            success(countryCode);\n        });\n    },\n    utilsScript: \"js\/utils.js\"<\/span>\n});<\/pre>\n
Telephone Number Validation<\/h2>\n
Before submitting the user’s input to the server-side script,  the telephone number validation in the client-side is always a recommended step. The following code snippet shows you how to validate the number of International Telephone Input field with the intlTelInput<\/b> plugin.<\/p>\n
Define the HTML elements with Telephone Input field where the error\/success message will be shown.<\/p>\n
<input<\/span> type<\/span>=\"tel\"<\/span> id<\/span>=\"phone\"<\/span>><\/span>\n<span<\/span> id<\/span>=\"valid-msg\"<\/span> class<\/span>=\"hide\"<\/span>><\/span>\u2713 Valid<\/span<\/span>><\/span>\n<span<\/span> id<\/span>=\"error-msg\"<\/span> class<\/span>=\"hide\"<\/span>><\/span><\/span<\/span>><\/span><\/pre>\n
Use the isValidNumber<\/code> method to check whether the user enters a valid telephone number based on the country dial code. On the blur event, the telephone number validation function will trigger.<\/p>\n
var<\/span> input = document<\/span>.querySelector(\"#phone\"<\/span>),\n    errorMsg = document<\/span>.querySelector(\"#error-msg\"<\/span>),\n    validMsg = document<\/span>.querySelector(\"#valid-msg\"<\/span>);\n\n\/\/ Error messages based on the code returned from getValidationError<\/span>\nvar<\/span> errorMap = [ \"Invalid number\"<\/span>, \"Invalid country code\"<\/span>, \"Too short\"<\/span>, \"Too long\"<\/span>, \"Invalid number\"<\/span>];\n\n\/\/ Initialise plugin<\/span>\nvar<\/span> intl = window<\/span>.intlTelInput(input, {\n    utilsScript: \"js\/utils.js\"<\/span>\n});\n\nvar<\/span> reset = function<\/span>(<\/span>) <\/span>{\n    input.classList.remove(\"error\"<\/span>);\n    errorMsg.innerHTML = \"\"<\/span>;\n    errorMsg.classList.add(\"hide\"<\/span>);\n    validMsg.classList.add(\"hide\"<\/span>);\n};\n\n\/\/ Validate on blur event<\/span>\ninput.addEventListener('blur'<\/span>, function<\/span>(<\/span>) <\/span>{\n    reset();\n    if<\/span>(input.value.trim()){\n        if<\/span>(intl.isValidNumber()){\n            validMsg.classList.remove(\"hide\"<\/span>);\n        }else<\/span>{\n            input.classList.add(\"error\"<\/span>);\n            var<\/span> errorCode = intl.getValidationError();\n            errorMsg.innerHTML = errorMap[errorCode];\n            errorMsg.classList.remove(\"hide\"<\/span>);\n        }\n    }\n});\n\n\/\/ Reset on keyup\/change event<\/span>\ninput.addEventListener('change'<\/span>, reset);\ninput.addEventListener('keyup'<\/span>, reset);<\/pre>\n
Configuration Options<\/h2>\n
The intlTelInput()<\/code> method provides various configuration options to customize and extend the functionality of the International Telephone Input plugin. Some most useful options of the intlTelInput<\/b> plugin are given below.<\/p>\n
    \n
  • allowDropdown<\/b> \u2013 (Boolean) (Default: true) Whether the dropdown is enabled or not. If disabled, dropdown list will not appear on the input element and the flag will not be clickable.<\/li>\n
  • autoHideDialCode<\/b> \u2013 (Boolean) (Default: true) Remove the dial code from input field on blur or submit.<\/li>\n
  • autoPlaceholder<\/b> \u2013 (String) (Default: polite) Set placeholder in the input field.<\/li>\n
  • customPlaceholder<\/b> \u2013 (Function) (Default: null) Change the auto placeholder with custom string.<\/li>\n
  • dropdownContainer<\/b> \u2013 (String) (Default: ”) Append country dropdown to a specific element.<\/li>\n
  • excludeCountries<\/b> \u2013 (Array) (Default: undefined) Display all countries except the specified ones.<\/li>\n
  • formatOnDisplay<\/b> \u2013 (Boolean) (Default: true) Format the input value during initialization.<\/li>\n
  • geoIpLookup<\/b> \u2013 (Function) (Default: null) Specify a custom function that looks up the user\u2019s location.<\/li>\n
  • hiddenInput<\/b> \u2013 (String) (Default: ”) Add a hidden input with the given name, and on submit, populate it with the result of getNumber.<\/li>\n
  • initialCountry<\/b> \u2013 (String) (Default: ”) Specify the country code to set the initial country selection. Set it to \u201cauto\u201d to get the user\u2019s location by IP address using geoIpLookup option.<\/li>\n
  • nationalMode<\/b> \u2013 (Boolean) (Default: true) Allow the user to enter the number without international dial codes.<\/li>\n
  • placeholderNumberType<\/b> \u2013 (String) (Default: MOBILE) Specify the number type to use for placeholders.<\/li>\n
  • onlyCountries<\/b> \u2013 (Array) (Default: undefined) Display only these specified countries.<\/li>\n
  • preferredCountries<\/b> \u2013 (Array) (Default: [ “us”, “gb” ]) Specify the countries to appear at the top of the list.<\/li>\n
  • separateDialCode<\/b> \u2013 (Boolean) (Default: false) Display the country dial code next to the selected flag.<\/li>\n
  • utilsScript<\/b> \u2013 (String) (Default: ”) Specify the path to the libphonenumber script to enable validation\/formatting.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    Telephone number input field is a commonly used field in the web form where the user can provide their contact info. If the web form is available internationally, the country code is mandatory for the <\/p>\n","protected":false},"author":1,"featured_media":3768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[81,16,213],"class_list":["post-3310","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-dropdown","tag-jquery","tag-jquery-plugin","cat-6-id","has_thumb"],"yoast_head":"\nInternational Telephone Input with Country Flags and Dial Codes using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"International Telephone Input jQuery plugin - Implement international telephone input field with national flags and dial codes dropdown list using jQuery. Simple jQuery plugin to add country names, national flags and international dial codes on the telephone input field.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"International Telephone Input with Country Flags and Dial Codes using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"International Telephone Input jQuery plugin - Implement international telephone input field with national flags and dial codes dropdown list using jQuery. Simple jQuery plugin to add country names, national flags and international dial codes on the telephone input field.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-07T19:35:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-17T20:52:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"International Telephone Input with Country Flags and Dial Codes using jQuery\",\"datePublished\":\"2018-06-07T19:35:49+00:00\",\"dateModified\":\"2019-01-17T20:52:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/\"},\"wordCount\":760,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png\",\"keywords\":[\"Dropdown\",\"jQuery\",\"jQuery Plugin\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/\",\"name\":\"International Telephone Input with Country Flags and Dial Codes using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png\",\"datePublished\":\"2018-06-07T19:35:49+00:00\",\"dateModified\":\"2019-01-17T20:52:21+00:00\",\"description\":\"International Telephone Input jQuery plugin - Implement international telephone input field with national flags and dial codes dropdown list using jQuery. Simple jQuery plugin to add country names, national flags and international dial codes on the telephone input field.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"international-telephone-input-country-flags-dial-codes-jquery-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/international-telephone-input-with-country-flags-dial-codes-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"International Telephone Input with Country Flags and Dial Codes using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"International Telephone Input with Country Flags and Dial Codes using jQuery - CodexWorld","description":"International Telephone Input jQuery plugin - Implement international telephone input field with national flags and dial codes dropdown list using jQuery. Simple jQuery plugin to add country names, national flags and international dial codes on the telephone input field.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/","og_locale":"en_US","og_type":"article","og_title":"International Telephone Input with Country Flags and Dial Codes using jQuery - CodexWorld","og_description":"International Telephone Input jQuery plugin - Implement international telephone input field with national flags and dial codes dropdown list using jQuery. Simple jQuery plugin to add country names, national flags and international dial codes on the telephone input field.","og_url":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-06-07T19:35:49+00:00","article_modified_time":"2019-01-17T20:52:21+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"International Telephone Input with Country Flags and Dial Codes using jQuery","datePublished":"2018-06-07T19:35:49+00:00","dateModified":"2019-01-17T20:52:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/"},"wordCount":760,"commentCount":5,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png","keywords":["Dropdown","jQuery","jQuery Plugin"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/","url":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/","name":"International Telephone Input with Country Flags and Dial Codes using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png","datePublished":"2018-06-07T19:35:49+00:00","dateModified":"2019-01-17T20:52:21+00:00","description":"International Telephone Input jQuery plugin - Implement international telephone input field with national flags and dial codes dropdown list using jQuery. Simple jQuery plugin to add country names, national flags and international dial codes on the telephone input field.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png","width":1366,"height":768,"caption":"international-telephone-input-country-flags-dial-codes-jquery-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/international-telephone-input-with-country-flags-dial-codes-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"International Telephone Input with Country Flags and Dial Codes using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/06\/international-telephone-input-country-flags-dial-codes-jquery-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Ro","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3310"}],"version-history":[{"count":4,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3310\/revisions"}],"predecessor-version":[{"id":3767,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3310\/revisions\/3767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3768"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}