Hello friends today in this artical i will show you how to How to set country code and flag in select using javascript, here i will show how to set up country code in select step by step.
Step-1 : Add this html code in your body section
<div class="main">
<div class="form_group">
<input type="tel" id="txtPhone" class="txtbox" />
<input id="btnSubmit" class="btn" type="button" value="SUBMIT" >
</div>
</div>
Step-2: Now add these js files and javascript bottom of the page and before body close.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var code = "+91"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
autoHideDialCode: true,
autoPlaceholder: "ON",
dropdownContainer: document.body,
formatOnDisplay: true,
hiddenInput: "full_number",
initialCountry: "auto",
nationalMode: true,
placeholderNumberType: "MOBILE",
preferredCountries: ['US'],
separateDialCode: true
});
$('#btnSubmit').on('click', function () {
var code = $("#txtPhone").intlTelInput("getSelectedCountryData").dialCode;
var phoneNumber = $('#txtPhone').val();
var name = $("#txtPhone").intlTelInput("getSelectedCountryData").name;
alert('Country Code : ' + code + '\nPhone Number : ' + phoneNumber + '\nCountry Name : ' + name);
});
});
</script>
Leave a Reply