Meglio la seconda allora, ti da l'oppurtunità di lavorare meglio sul DOM:
JS offre una serie di funzionalità per la manipolazione del HTML tramite DOM (non sto a spiegarti il tutto, ma sostanzialmente tratta HTML come un albero dove, se un tag è contenuto dentro un altro, allora è figlio del suo contenitore)
Ora, pensa ad una struttura come questa:
codice:
<form action = "..." method = "..">
<table id="MyFormTable">
<tr>
<th rel="username"></th><td><input name="username" type="text" /></td>
</tr>
<tr>
<th rel="password"></th><td><input name="password" type="password" /></td>
</tr>
<tr>
<th rel="conferma"></th><td><input name="conferma" type="password" /></td>
</tr>
<tr>
<th rel="nome"></th><td><input name="nome" type="text" /></td>
</tr>
<tr>
<th rel="cognome"></th><td><input name="cognome" type="text" /></td>
</tr>
...
</form>
Come puoi vedere ho creato una semplice tabella con un th ed un td per ogni riga, a questo punto creerei il select per il cambio della lingua:
codice:
<select name="language" id="LanguageSelector">
<option value="it">Italiano</option>
<option value="en">English</option>
</select>
Infine, ho bisogno di un Dizionario, che sarebbe un array nominale, in JS si definisce così:
codice:
var localizedTXT = {
'it' : {
'username' : 'Nome Utente',
'password' : 'Password',
'conferma' : 'Conferma',
...
},
'en' : {
'username' : 'Username',
'password' : 'Password',
'conferma' : 'Confirm',
...
}
};
Scommetto che hai già intuito più o meno come funziona...
Il codice JS
codice:
function changeLang(lang){
var myTable = document.getElementById('MyFormTable');
var allTh = myTable.getElementsByTagName('th');
for(i = 0; i < allTh.length; i++)
{
var relVal = allTh[i].getAttribute('rel');
allTh[i].innerHTML = localizedTXT[lang][relVal];
}
}
window.onload = function(){
document.getElementById('LanguageSelector').onchange = function(){
var lang = this.options[this.selectedIndex].value;
changeLang(lang)
}
changeLang('it');
}
Ed il gioco è fatto.
(crossposting / titolo)
