How to create International Phone Input using intl-tel-input jQuery Plugin
What Will I Learn?
- You will learn How to use intl-tel-input jQuery Plugin
- You will learn How to create a phone input html element
- You will learn how to add international phone function to input element
Requirements
Write here a bullet list of the requirements for the user in order to follow this tutorial.
- Basic Knowledges about HTML
- Basic Knowledges about jQuery
- You have to install or host the jQuery file, You can add jQuery CDN if you don't want to install or host it
- You have to install or host the about hideshowpassword plugin, You can get it on github : https://github.com/jackocnr/intl-tel-input
Difficulty
- Basic
Tutorial Contents
Each country has a different phone number, for example : US use +01 for begin number while indonesia starts with +62. So to make a phone number input that provides manual choice of each country code is very difficult. To solve this problem we can use the* intl-tel-input plugin*. By using this plugin, you easily create a phone number input that provides a selection of countries that marked with flags. For more details, let's look at the following steps.
[Download and host the intl-tel-input Plugin]
Download the plugin on github : https://github.com/jackocnr/intl-tel-input
Ekstrax all file in a folder
[Creating a HTML input element]
- Open your text editor.
- Create new file save as
index.htmland save in intl-tel-input Plugin that you have ekstraxted - Add the HTML element as usual.
<html>
<head>
<title>Internation Phone Input</title>
</head>
<body>
</body>
</html>
- Add the
<form>element and create an input text
<form>
<input id="phone" type="text">
</form>
[Including jQuery CDN and intl-tel-input Plugin to HTML file
- Because the intl-tel-input Plugin is part of jQuery so to use it we need to host jquery also or you can add the CDN of jQuery if you don't want to host it. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in
<head>element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- Include intl-tel-input Plugin
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link rel="stylesheet" href="build/css/demo.css">
<script src="build/js/intlTelInput.js"></script>
[Starting Script]
-To write the jQuery Script we should open <script> tag. You can put it in <head> element or in <body> element.
<script></script>
- Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.
$(document).ready(function(){
});
- Select the input element by id.
$("#phone")
- To show all contry flag in select option, add the intlTelInput() function from intl-tel-input plugin
$("#phone").intlTelInput({
utilsScript: "/js/utils.js"
});
[Testing]
- Save the file and try to run on your browser
[full code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link rel="stylesheet" href="build/css/demo.css">
<script src="build/js/intlTelInput.js"></script>
<title>International Phone Input</title>
</head>
<body>
<h3>International Phone</h3>
<form>
<input id="phone" type="text">
</form>
<script>
$("#phone").intlTelInput({
utilsScript: "/js/utils.js"
});
</script>
</body>
</html>
Full file on GDRIVE
Curriculum
- How to pop-up image galery on modal using bootstrap and jQuery
- How to check already exist username when user input on Sig Up Form
- How to add Rows in Table element using jQuery
- How to insert data to MySql from PHP using jQuery AJAX
- Auto-Refresh Specific HTML element Without Reloading page Using jQuery
- How to create a toggle button to show and hide an element
- How to Create Filter Lists using jQuery
- How to Create Filter Tables using jQuery
Posted on Utopian.io - Rewarding Open Source Contributors
Nice post
Please vote me to
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Oke bro. I will do my best gor next
bereh, beujroh sabe rakan @sogata
woi really cool, I hope you can vote me and I invite you to come to me to vote have me!! Awesome upvote?
Hey @sogata I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Nice..