submit country by ISO code - html form

Question

So i would like to offer a list of all countries for a user to select from a form. I found a pretty good list of countries in html format from this site. The site implements my task by listing out the full country name as an html string but the form actually sends its ISO code to the server. This is great but how would someone tackle the issue of presenting the full country name when reading the submitted values?

Do you think its best to submit a country value as ISO values or should I just submit the full name name of the country? All sites seem to be doing the earlier option but it just seems like a hassle to me. Can someone present some thoughts to this matter explaining why to use ISO codes in the first place and how to decode them back to country names if their ISO were used? thank you

Answer 1

As per my comment... The idea is, when the select changes, it calls the JS function. In there, you have an array set up with the key matching the value of the select, and what you want it to show. So, you'd just need to pass that code the array to get the value.

<form>

<select onchange="showName()" id="country">
    <option value="AF">Afghanistan</option>
    <option value="AX">Åland Islands</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="AZ">Azerbaijan</option>
    <option value="BS">Bahamas</option>
...
</select>
<div id="selResult">
selected: nothing
</div>
</form>

JS:

var myArray = {"AF": "Afghanistan", "AX": "Åland Islands", "AL": "Albania"};
function showName(){
  selectRes = myArray[document.getElementById("country").value];
  document.getElementById("selResult").innerHTML = selectRes;
}

You'll have to create the complete list. But that's the basic idea how to make it work.

This here fiddle has this whole thing, plus one additional way to make use of the reference array.

For what it's worth, if you intend to use this a lot, you should consider creating a reference table in your database, rather than mucking around in JS to do this.