使用XML更改表单语言

Question

I have a form with 4 links displayed at the top of my page for the languages: English, French, Italian and German. When the user clicks one of the links, the language of the form labels is supposed to change to that specific language. The four languages are stored inside an XML file, however I have no idea how to call them since I have never worked with XML. I did a similar project where I had to change the form language using ".txt" files and I managed to get that working. The code below is how I got the text files to work, but how would I go about changing the language through my XML file?

Javascript Code that worked with changing the text files

var request;
function init() {
var language = document.getElementsByTagName("a");
for (var i = 0; i < language.length; i++) {
    language[i].onclick = processRequest;
}
}

function processRequest(e) {
evt = e || window.event;
target = evt.target || evt.srcElement;
request = new XMLHttpRequest();
request.onreadystatechange = displayData;
request.open('GET', target.id + ".txt", true);
request.send(null);
}

function displayData() {
if (request.readyState == 4 && request.status == 200) {
    var fields = request.responseText.split(",");
    var labels = document.getElementsByTagName("label");
    for (var i = 0; i < labels.length; i++) {
        labels[i].innerText = fields[i];
    }
}
}


window.onload = init();

My XML file

<LANGUAGES>
<english>
    <FIELD>First Name:</FIELD>
    <FIELD>Last Name:</FIELD>
    <FIELD>Address 1:</FIELD>
    <FIELD>Address 2</FIELD>
    <FIELD>City:</FIELD>
    <FIELD>Province:</FIELD>
    <FIELD>Postal Code:</FIELD>
    <FIELD>Visited:</FIELD>
</english>
<francais>
    <FIELD>Prenom:</FIELD>
    <FIELD>Nom de Famille:</FIELD>
    <FIELD>Adresse 1:</FIELD>
    <FIELD>Adresse 2:</FIELD>
    <FIELD>Ville:</FIELD>
    <FIELD>Province:</FIELD>
    <FIELD>Code Postal:</FIELD>
    <FIELD>Visite:</FIELD>
</francais> 
<italiano>
    <FIELD>Primo Nome:</FIELD>
    <FIELD>Cognome:</FIELD>
    <FIELD>Indirizzo 1:</FIELD>
    <FIELD>Indirizzo 2:</FIELD>
    <FIELD>Citta:</FIELD>
    <FIELD>Province:</FIELD>
    <FIELD>Codice Postale:</FIELD>
    <FIELD>Visitato:</FIELD>
</italiano>
<deutsche>  
    <FIELD>Vorname:</FIELD>
    <FIELD>Nachname:</FIELD>
    <FIELD>Adresse 1:</FIELD>
    <FIELD>Adresse 2:</FIELD>
    <FIELD>Stadt:</FIELD>
    <FIELD>Provinz:</FIELD>
    <FIELD>Postleitzahl:</FIELD>
    <FIELD>Besucht:</FIELD>
</deutsche>
</LANGUAGES>

HTML

<header>
        <span>&nbsp;</span>
        <ul id="languageChoice">
            <li class="rb"><a name="deutsche" id="deutsche">Deutsche</a></li>
            <li class="rb"><a name="italiano" id="italiano">Italiano</a></li>
            <li class="rb"><a name="Francais" id="francais">Francais</a></li>
            <li class="rb"><a name="English" id="english">English</a></li>
        </ul>
    </header>
    <section>
        <form method="get" action="" id="add1">
            <fieldset>
                <table>
                    <tr>
                        <td class = "field"><label for="firstName">First Name:</label></td>
                        <td><input id="firstName" size=10 name="firstName"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="lastname">Last Name:</label></td>
                        <td><input id="lastName" size=15 name="lastName"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label  for="address1">Address 1:</label></td>
                        <td><input id="address1" size=25 name="address1"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="address2">Address 2:</label></td>
                        <td><input id="address2" size=25 name="address2"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="city">City:</label></td>
                        <td><input id="city" size=20 name="city"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="province">Province:</label></td>
                        <td><input id="province" size=20 name="province"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="postalCode">Postal Code:</label></td>
                        <td><input id="postalCode" size=7 name="postalCode"></td>
                    </tr>
                    <tr>
                        <td class = "field"><label for="counter">Visited:</label></td>
                        <td><input id="counter" size=7 name="counter" disabled="yes"></td>
                    </tr>
                    <tr>
                        <td colspan=2><input type="submit" value="send" ></td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </section>

Answer 1

You can load an XML using domParser , which converts it into a DOM document. After that you can treat it like a regular DOM document and use methods such as getElementsByTagName to get the language of your choice. Example:

if (window.DOMParser) {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(xml,"text/xml");
} else {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(xml); 
}

console.log(xmlDoc.getElementsByTagName('english')[0].children);

Will return a list of elements in the english tag:

Here's a fiddle: http://jsfiddle.net/jorgthuijls/M7mZ4/1/ Run it and check your console.

Using that, loop through your form's labels and update the innerText .