Auto Add Country Code in Input using JavaScript

Auto Add Country Code in Input field using JavaScript, here are 3 steps to create and add auto country code,

Include major CDNs.
Create an HTML input field.
Include intlTelInput JS to set country code.
Create a script to set the code on the selected country.

Auto Add Country Code in Input using JavaScript

We will use the International Telephone Input JavaScript plugin to get all the country codes with country flags.

Know More: https://github.com/jackocnr/intl-tel-input

Include Major CDNs

<link rel="stylesheet" href="build/css/intlTelInput.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.js"></script>

I provide all the files and you download complete code on the same at the end of this tutorial.

Create an HTML input field

We will use the ID attribute of the phone field to set the country code.

<form>
    <input id="phone" name="phone" type="tel">
    <button type="submit">Submit</button>
  </form>

<form>

<button type="submit">Submit</button>

</form>

Include `intlTelInput` JS to set country code

<script>
// Vanilla Javascript
var input = document.querySelector("#phone");
window.intlTelInput(input,({
      // options here
}));
<script>

// Vanilla Javascript

var input = document.querySelector("#phone");

window.intlTelInput(input,({

// options here

}));

Above is the main code to get the countries from the JavaScript plugin.

Here is the code to set the country code on the same phone field on country change,

<script>
 $(document).ready(function() {
    $('.iti__flag-container').click(function() { 
      var countryCode = $('.iti__selected-flag').attr('title');
      var countryCode = countryCode.replace(/[^0-9]/g,'')
      $('#phone').val("");
      $('#phone').val("+"+countryCode+" "+ $('#phone').val());
   });
});
</script>

$(document).ready(function() {

$('.iti__flag-container').click(function() {

var countryCode = $('.iti__selected-flag').attr('title');

var countryCode = countryCode.replace(/[^0-9]/g,'')

$('#phone').val("");

$('#phone').val("+"+countryCode+" "+ $('#phone').val());

});

</script>

Explanation: On this particular code snippet we take the country code from the title using JavaScript replace function.

Here is the complete source code to Auto Add Country Code in Input using JavaScript,

Complete Source Code of Add Country Code in the Input field

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Phone Number With Country Code Using JS</title>
  <link rel="stylesheet" href="build/css/intlTelInput.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <h1>Phone Number With Country Code</h1>
  <form>
    <input id="phone" name="phone" type="tel">
    <button type="submit">Submit</button>
  </form>

  <script src="build/js/intlTelInput.js"></script>
    <script>
    // Vanilla Javascript
    var input = document.querySelector("#phone");
    window.intlTelInput(input,({
      // options here
    }));

    $(document).ready(function() {
        $('.iti__flag-container').click(function() { 
          var countryCode = $('.iti__selected-flag').attr('title');
          var countryCode = countryCode.replace(/[^0-9]/g,'')
          $('#phone').val("");
          $('#phone').val("+"+countryCode+" "+ $('#phone').val());
       });
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Phone Number With Country Code Using JS</title>

</head>

<body>

<h1>Phone Number With Country Code</h1>

<form>

<button type="submit">Submit</button>

</form>

// Vanilla Javascript

var input = document.querySelector("#phone");

window.intlTelInput(input,({

// options here

}));

$(document).ready(function() {

$('.iti__flag-container').click(function() {

var countryCode = $('.iti__selected-flag').attr('title');

var countryCode = countryCode.replace(/[^0-9]/g,'')

$('#phone').val("");

$('#phone').val("+"+countryCode+" "+ $('#phone').val());

});

</script>

</body>

</html>

Click here to check the demo,

Demo of Auto Add Country Code

Here are complete files you can download from the given link,

https://codingtasks.net/download/add-country-code-in-input-using-javascript-complete-source-code-files/

These are the complete solution to add country code on any input field.

Happy Coding..!

Was this article helpful?

YesNo

6 thoughts on “Auto Add Country Code in Input using JavaScript”

Set and Display Session Data in CodeIgniter - PHPCODER.TECH says:

January 10, 2021 at 11:18 pm

[…] Auto Add Country Code in Input using JavaScript […]

Export MySQL Data to Excel in PHP Using Ajax - PHPCODER.TECH says:

January 19, 2021 at 12:27 am

[…] Auto Add Country Code in Input using JavaScript […]

Get Current City State and Zip Code Using PHP - PHPCODER.TECH says:

January 24, 2021 at 8:24 pm

[…] Auto Add Country Code in Input using JavaScript […]

JavaScript For Loop Complete Guide With Example - PHPCODER.TECH says:

March 29, 2021 at 12:37 am

[…] Auto Add Country Code in Input using JavaScript […]

How to Set PHP Variable in JavaScript With Example - PHPCODER.TECH says:

April 18, 2021 at 7:56 pm

[…] Auto Add Country Code in Input using JavaScript […]

3 popular ways to make HTTP requests in JavaScript - PHPCODER.TECH says:

December 21, 2022 at 12:12 am

[…] Auto Add Country Code in Input using JavaScript […]

Auto Add Country Code in Input using JavaScript

Include Major CDNs

Create an HTML input field

Include `intlTelInput` JS to set country code

Complete Source Code of Add Country Code in the Input field

By Bikash

Related Post

6 thoughts on “Auto Add Country Code in Input using JavaScript”

Leave a Reply Cancel reply

You Missed

5 Most Effective Ways To Optimize PHP Code

Debugging in PHP: A Comprehensive Guide with Examples

3 popular ways to make HTTP requests in JavaScript

PHP: Logout From All Devices on Password Change

Include Major CDNs

Create an HTML input field

Include intlTelInput JS to set country code

Complete Source Code of Add Country Code in the Input field

By Bikash

Related Post

6 thoughts on “Auto Add Country Code in Input using JavaScript”

Leave a Reply Cancel reply

You Missed

Include `intlTelInput` JS to set country code