Dowemo
0 0 0 0


Question:

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 the country name. For eg, if someone types "England" in the text box, a text should appear somewhere below the text box as "Country:England Code+44" or if someone inputs "India" in the text box, something like "Country:India Code:+91" should be displayed.

Can this be done in html using javascript but without using any database,i.e. purely using javascript? I mean the javascript should match the country name that is entered in the text box with the dialing code based on some pre defined rules in the javascript itself and display the country name as well as the code.

Please help me out with the html code as well as the javascript.

Thank you


Best Answer:


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>
<body onload="document.getElementById('myedit').value=''">
  <input type="text" id="myedit" onchange="editChange()" onkeyup="editChange()" />
  <div id="result">&nbsp;</div>
  <script type="text/javascript">
  <!--
  // list of codes
  var cCode = new Array();
  cCode[0] = '+44';
  cCode[1] = '+1';
  cCode[2] = '+381';
  cCode[3] = '+20';
  // ... etc ...
  // list of countries
  var cName = new Array();
  cName[0] = 'England';
  cName[1] = 'USA';
  cName[2] = 'Serbia';
  cName[3] = 'Egypt';
  // ... etc ...
  function editChange() {
    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 = new Array();
  cCode[0] = 'England,44';
  cCode[1] = 'USA,1';
  cCode[2] = 'Serbia,381';
  cCode[3] = 'Egypt,20';
  // ... more countries & dialing codes ...
  function editChange() {
    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 url
  var cCode = new Array();
  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 slash
  function editChange() {
    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!




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs