Allow user to choose language of a postal form and adapt the select options accordingly in jQuery

Question

I have to create a form that prompts the user to enter their Zip code, State and Street address. But first, the user should be able to choose their language in a <select>, and the labels and select options (such as their title) have to be set in the language they choose.

After the language, they should be able to select their country in a short list, and the regex validation for the Zip codes would of course have to match the selected country.

I'd like to do it without a plugin. What would be the cleanest way to do it?

What I've thought of thus far:

//Get the selected language and country
function which(){
    lang = $('#language').prop('selectedIndex');
    country = $('#country').prop('selectedIndex');
    if(lang == 1){
        pickedLang = "en";
    }else if(lang == 2){
        pickedLang = "de";
    }else if(lang == 3){
        pickedLang = "fr";
    }

    if(country == 1){
        pickedCountry = "US";
    }else if(country == 2){
        pickedCountry = "UK";
    }else if(country == 3){
        pickedCountry = "DE";
    }else if(country == 4){
        pickedCountry = "FR";
    }else{
        pickedCountry = 0;
    }
}

And then, to change the labels and options to match the selected language:

$('#language').change(function(){
    if(pickedLang == "en"){
        $('.country label').text('Country');
        $('.language label').text('Language');
        $('#country option').eq(0).text('Pick a country');
        $('#country option').eq(1).text('United States');
        $('#country option').eq(2).text('United Kingdom');
        $('#country option').eq(3).text('Germany');
        $('#country option').eq(4).text('France');

        $('.gender label').text('Title');
        $('#gender option').eq(0).text('Choose...');
        $('#gender option').eq(1).text('Mr.');
        $('#gender option').eq(2).text('Ms.');
        $('#gender option').eq(3).text('Miss');

        $('.name label').text('Name:');
        $('.first-name label').text('First name:');
        $('.street label').text('Street:');
        $('.number label').text('Number:');
        if(pickedCountry == "UK"){
            $('.postcode label').text('Post Code:');
        }else{
            $('.postcode label').text('Zip Code:');
        }
        $('.state label').text('State:');
        $('.city label').text('City:');
    }else if [...]

But I really feel like this could be simplified and cleaner somehow.

Edit: Thanks to Nicklas, I've now cleaned up the code and decided to use JSON to store all the labels in the different languages.

{
"en": [
{
    "languageLabel":    "Language",
    "countryLabel":     "Country",
    "nameLabel":        "Name",
    "emailLabel":       "E-mail",
    "streetLabel":      "Street",
    "nbrLabel":         "N°",
    "zipLabel":         "Zip",
    "stateLabel":       "State",
    "cityLabel":        "City",
    "sendLabel":        "Send"  
}
],

"fr": [
{
    "languageLabel":    "Langue",
    "countryLabel":     "Pays",
    "nameLabel":        "Nom",
    "emailLabel":       "Adresse e-mail",
    "streetLabel":      "Rue",
    "nbrLabel":         "N°",
    "zipLabel":         "CP",
    "stateLabel":       "Province",
    "cityLabel":        "Ville",
    "sendLabel":        "Envoyer"   
}
],

"de": [
{
    "languageLabel":    "Sprache",
    "countryLabel":     "Land",
    "nameLabel":        "Name",
    "emailLabel":       "E-Mail-Adresse",
    "streetLabel":      "Straße",
    "nbrLabel":         "N°",
    "zipLabel":         "PLZ",
    "stateLabel":       "Staat",
    "cityLabel":        "Stadt",
    "sendLabel":        "Senden"    
}
]
}

jQuery:

var labels;
    $.getJSON("path-to-json-file",function(data){
            labels=data;
    }); 


    ////////// DETECT CHANGES IN THE SELECTBOXES
    $('#language, #country').change(function(){
        which();
        var currentLabels = labels[pickedLanguage];
        $('#language-container label').text(currentLabels.languageLabel);
        $('#country-container label').text(currentLabels.countryLabel);
    });

However, the console returns an error and says it cannot read the property 'fr' (or any other language) of undefined. As I'm not familiar with the use of JSON at all, I'm afraid I messed up somewhere.

Answer 1

Try cleaning this up by making a dict of all the variables:

var langOptions = {
    en: {
        countryLabel:  'Country',
        languageLabel: 'Language',

        ...
    }
}

Then when you need to access the appropriate ones:

var myOptions = langOptions[pickedLang];

Then you can access them in the same way always, without endless if statements:

$('.country label').text(myOptions.countryLabel);
$('.language label').text(myOptions.languageLabel);

Further on, consider stashing away the langOptions object in json format and loading it through ajax using jQuery.getJSON(). That should make for much, much cleaner code.

EDIT: An example of usage, to clarify: http://jsfiddle.net/9Npg2/