Javascript: How To Show Country Code Based On Country Name Entered In Text Box

August 29, 2023 Post a Comment

I want to create a web page with a text box. When one types the country name in the text box, the area below the text box should show the dialing code for that country along with t

Solution 1:

Bellow you can see on-page javascript solution. In practice this is not the best way how to do this. However this is just a quick idea...

Code sample

<html><head><title>Test</title></head><bodyonload="document.getElementById('myedit').value=''"><inputtype="text"id="myedit"onchange="editChange()"onkeyup="editChange()" /><divid="result">&nbsp;</div><scripttype="text/javascript">
  <!--
  // list of codesvar cCode = newArray();
  cCode[0] = '+44';
  cCode[1] = '+1';
  cCode[2] = '+381';
  cCode[3] = '+20';
  // ... etc ...// list of countriesvar cName = newArray();
  cName[0] = 'England';
  cName[1] = 'USA';
  cName[2] = 'Serbia';
  cName[3] = 'Egypt';
  // ... etc ...functioneditChange() {
    obj = document.getElementById('myedit');
    s = obj.value.toLowerCase();
    res = '';
    for (i=0; i<cName.length; i++) {
      s2 = cName[i].toLowerCase().substr(0, s.length);
      if (s2 == s && s != '') res += 'Country: <b>' + cName[i] + '</b>, dialing code: <b>' + cCode[i] + '</b><br />';
      }
    document.getElementById('result').innerHTML = res == '' ? '<i>no result found!</i>' : res;
    }
  -->
  </script></body></html>

Preview

enter image description here

Modify this to fit your needs.

Or even simpler version with same results would be:

// country,code (w/ no '+' prefix)var cCode = newArray();
  cCode[0] = 'England,44';
  cCode[1] = 'USA,1';
  cCode[2] = 'Serbia,381';
  cCode[3] = 'Egypt,20';
  // ... more countries & dialing codes ...functioneditChange() {
    obj = document.getElementById('myedit');
    s = obj.value.toLowerCase();
    res = '';
    for (i=0; i<cCode.length; i++) {
      s2 = cCode[i].toLowerCase().substr(0, s.length);
      if (s2 == s && s != '') {
        sp = cCode[i].split(',');
        res += 'Country: <b>' + sp[0] + '</b>, dialing code: <b>+' + sp[1] + '</b><br />';
        }
      }
    document.getElementById('result').innerHTML = res == '' ? '<i>no result found!</i>' : res;
    }

Example #2

Consider this code

// country,code (w/ no '+' prefix),image-name,target urlvar cCode = newArray();
  cCode[0] = 'United Kingdom,44,gbr.png,uk.html';
  cCode[1] = 'United States,1,usa.png,usa.html';
  cCode[2] = 'Serbia,381,srb.png,serbia.html';
  cCode[3] = 'Egypt,20,egy.png,egypt.html';
  cCode[4] = 'Sudan,249,sud.png,sudan.html';
  cCode[5] = 'Senegal,221,sen.png,senegal.html';
  cCode[6] = 'Somalia,252,som.png,somalia.html';

  // ... more countries & dialing codes ...var flagsDirectory = 'flags/'; // ends with slashfunctioneditChange() {
    obj = document.getElementById('myedit');
    s = obj.value.toLowerCase();
    res = '';
    for (i=0; i<cCode.length; i++) {
      s2 = cCode[i].toLowerCase().substr(0, s.length);
      if (s2 == s && s != '') {
        sp = cCode[i].split(',');
        res += '<tr><td width="35"><img src="'+flagsDirectory+sp[2]+'" width="32" height="32" border="0" /></td><td><a href="'+sp[3]+'" style="color:blue;text-decoration:none;"">'+sp[0]+' (+'+sp[1]+')</a></td></tr>';
        }
      }
    if (res != '') {
      res = '<table style="font-family:arial,tahoma;font-size:12px;color:#000000">'+res+'</table>';
      }
    document.getElementById('result').innerHTML = res == '' ? '&nbsp;' : res;
    }

Note: I've created flags dir in script's directory and put some flags there for testing purpose.

Preview #2

enter image description here

Cheers!

Solution 2:

Use autocomplete with AJAX. Here is an example:

http://jqueryui.com/autocomplete/#remote-jsonp

and on this site using Bootstrap:

http://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example

and more in depth jQuery UI explanation of this:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

Solution 3:

The answer is: Yes it can be done with JavaScript.

Now you need to think about where you are going to store that information.

You should google: JSON Object and learn to write one. If you're worried about how its presented, you'll have to look up some HTML & CSS. When you got some code, we'll help you fine tune it :)

Hope this helps.

javascript html php