Reply to thread

Message

<blockquote data-quote="ishan0001" data-source="post: 21841000" data-attributes="member: 262672">Get country data from an API as JSON. Use it to populate the dropdown. Filter the JSON on button cllick and find the country code. <img src="/styles/default/xenforo/smilies/default/wink.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />BTW this solution requires jQuery. If you need pure javascript, It's better to hardcode a country data json in the script than get it from an api[PHP]&lt;!DOCTYPE html&gt;&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src=&quot;https://code.jquery.com/jquery-3.2.1.min.js&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; integrity=&quot;sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=&quot;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; crossorigin=&quot;anonymous&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var countries;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function populate(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var s1 = document.getElementById(&quot;slct1&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var selectedCountry = countries.filter(function(country) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return country.name ===&nbsp; s1.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(selectedCountry[0] !== undefined)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('+' + selectedCountry[0].callingCodes[0]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('Invalid country');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.getJSON(&quot;https://restcountries.eu/rest/v2/all&quot;, function(json){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; countries = json;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(countries, function(i, country) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#slct1').append($('&lt;option&gt;').text(country.name).attr('value', country.name));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Select Country&lt;/h2&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;hr /&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;slct1&quot;&gt;Choose Country:&lt;/label&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;select id=&quot;slct1&quot; name=&quot;slct1&quot;&gt;&lt;/select&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;button onclick=&quot;populate()&quot;&gt;&nbsp; Click me&lt;/button&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;hr /&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/PHP]Save
Save
Save</blockquote>

[QUOTE="ishan0001, post: 21841000, member: 262672"] [SIZE=3]Get country data from an API as JSON. Use it to populate the dropdown. Filter the JSON on button cllick and find the country code. ;) BTW this solution requires jQuery. If you need pure javascript, It's better to hardcode a country data json in the script than get it from an api [/SIZE] [PHP] <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script> <script type="text/javascript"> var countries; function populate(){ var s1 = document.getElementById("slct1"); var selectedCountry = countries.filter(function(country) { return country.name === s1.value; }); if(selectedCountry[0] !== undefined) alert('+' + selectedCountry[0].callingCodes[0]); else alert('Invalid country'); } $(document).ready(function() { $.getJSON("https://restcountries.eu/rest/v2/all", function(json){ countries = json; $.each(countries, function(i, country) { $('#slct1').append($('<option>').text(country.name).attr('value', country.name)); }); }); } ); </script> </head> <body> <h2>Select Country</h2> <hr /> <label for="slct1">Choose Country:</label> <select id="slct1" name="slct1"></select> <button onclick="populate()"> Click me</button> <hr /> </body> </html> [/PHP][CENTER][COLOR=#FFFFFF]Save[/COLOR] [COLOR=#FFFFFF]Save[/COLOR] [COLOR=#FFFFFF]Save[/COLOR][/CENTER] [/QUOTE]

Verification

Awruddata maasa keeyada?

Search

Latest ads

Reply to thread