International phone number with Dial Code and Flag on HTML input tag

The telephone number is one of the important data that can be used as a condition for registering on the site. The telephone number of each country has a specific code to distinguish this phone number from which country it originates. This will make it easier to track and contact the owner of the number.

Sometimes it happens that someone forgets their country code when registering on a site. To overcome this, in making the <input> element a country code dropdown list is needed as shown below,

First, Include the script below in the head section

<! — ADDED TAG JS BY WOT.AGUNG (AGUNGCODE.COM) 2021–07–22 → <link rel=”stylesheet” href=”@Url.Content(“~/Content/Flag/css/intlTelInput.css”)” /> <script type=”text/javascript” src=”@Url.Content(“~/Content/Flag/js/intlTelInput-jquery.min.js”)”></script> <script type=”text/javascript” src=”@Url.Content(“~/Content/Flag/js/intlTelInput.min.js”)”></script> <script type=”text/javascript” src=”@Url.Content(“~/Content/Flag/js/utils.js”)”></script>

Second, Create HTML Input Tag

<div class=”form-group form-group-xs”> <label class=”col-md-3 control-label text-muted”>Phone </label> <div class=”col-md-8"> <input class=”form-control” type=”tel” id=”fr_PHONE” name=”fr_PHONE” placeholder=”(___)-____-____” maxlength=”15" /> </div> </div>

Third, Plugin initialization

$(“#fr_PHONE”).intlTelInput({ //negara-negara yang tampil di baris pertama preferredCountries: [“id”, “jp”, “th”,”ph”,”vn”,”us”], utilsScript: “~/Content/Bootstrap/js/utils.js” //Isi dengan Option

});

For the next step, you can visit the Agung Code website. On the site it will be explained how to Get Value Country Code and Event Handlers