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
intlTelInputJS to set country code. - Create a script to set the code on the selected country.
We use International Telephone Input JavaScript plugin to get all the country code with country flag.
Know More: https://github.com/jackocnr/intl-tel-input
Table of Contents
- Include Major CDNs
- Create an HTML input field
- Include intlTelInput JS to set country code
- Complete Source Code of Add Country Code in Input field
- Subscribe For Latest Updates
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 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>
Include intlTelInput JS to set country code
<script>
// Vanilla Javascript
var input = document.querySelector(“#phone”);
window.intlTelInput(input,({
// options here
}));
<script>
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(/[⁰-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 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(/[⁰-9]/g,’’)
$(‘#phone’).val(“”);
$(‘#phone’).val(“+”+countryCode+” “+ $(‘#phone’).val());
});
});
</script>
</body>
</html>
Click here to check demo,
Here are complete files you can download from the given link,
https://phpcoder.tech/auto-add-country-code-in-input-field-using-javascript/
These are complete solution to add country code on any input field.
Happy Coding..!