How to set country code and flag in textbox using javascript

international telephone input with country flags and dial codes using javascript

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

avatar
  Subscribe  
Notify of