jQuery Phone Number Country Dial Codes Input Field Picker With Flags Using Bootstrap in Javascript Full Project For Beginners

jQuery Phone Number Country Dial Codes Input Field Picker With Flags Using Bootstrap in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a jquery phone number country dial codes input field picker with flags using bootstrap in javascript.All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap/dist/css/flags.css"/>
<div class="container" style="margin-top:50px;">
    <h3>Credit to <a href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap/">https://www.jqueryscript.net/demo/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap/</a></h3><br>
<form>
    <div class="form-group">
        <label>Select Country</label><br>
        <div class="select-country" data-input-name="country2" data-selected-country="US">
        </div>
    </div>
</form>
    
    <form>
    <div class="form-group">
        <label>Select Country</label><br>
        <div id="basic" data-input-name="country"></div>
    </div>
</form>



<form>
    <div class="form-group">
        <label>Select Country</label>
        <div id="advanced"
             data-input-name="country3"
             data-selected-country="CA"
             data-button-size="btn-lg"
             data-button-type="btn-danger"
             data-scrollable="true"
             data-scrollable-height="250px"
             data-countries='{"US": "United States","CA": "Canada"}'>
        </div>
    </div>
</form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Country-Selecter-with-Flags-flagstrap/dist/js/jquery.flagstrap.js"></script>

 

See also  Node.js Express Image Gallery Using MongoDB & Mongoose Library Full Project

 

Now just make a script.js file and copy paste the following code

 

script.js

 

$('#basic').flagStrap();

$('.select-country').flagStrap({
    countries: {
        "US": "USD",
        "AU": "AUD",
        "CA": "CAD",
        "SG": "SGD",
        "GB": "GBP",
    },
    buttonSize: "btn-sm",
    buttonType: "btn-info",
    labelMargin: "10px",
    scrollable: false,
    scrollableHeight: "350px"
});

$('#advanced').flagStrap({
    buttonSize: "btn-lg",
    buttonType: "btn-primary",
    labelMargin: "20px",
    scrollable: false,
    scrollableHeight: "350px"
});

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

See also  Build a Currency Converter Web Application in Javascript With Full Source Code

 

Leave a Reply