Meertalig formulier

[Verwijderd]

Al enkele dagen aan het zoeken hoe ik een webformulier meertalig krijg en de labels/foutmeldingen/etc automatisch vertaal wanneer een taal wordt geselecteerd.

Principe wat ik wens te bereiken, kan je live zien op:
http://web.geotracer.be/

Hier worden de labels mooi vertaald, zonder page refresh, van zodra een andere taal wordt gekozen. Nu probeer ik een vereenvoudigde versie van zo'n aanmeld formulier in elkaar te knutselen.

Heb snel even deze webform online gegooid:
http://www.geotracer.be/demo/Login/

Weet iemand een eenvoudige manier om dit met jquery en ajax uit te werken?

Mijn eerste idee was om het zo te doen:

code:

{ klikken op een vertaalknopje }
$.post("/translate.php", {lang: "" + language + ""}, function(data) {
    if(data.length > 0) {
        $('#form').hide();
        $('#result').html(data);
    }
});

Maw een vertaald formulier terug posten in <div id="result"></div> en het originele formulier verbergen. Een nogal omslachtige manier, maar ik geraak er niet aan uit om dit beter te doen ... Hoe kan ik dit aanpakken?

[zwippie]

Het eenvoudigste zou zijn om de vertalingen in een 'woordenboek' te gooien, en bij het kiezen van een taal de label teksten te veranderen. De naam van een veld in dict moet overeenkomen met het name attribuut van het corresponderende formulier element.

JavaScript:

var dict = {
  en: {
    labels: { name: 'Name', password: 'Password' },
    validation: {
      name: { invalid: 'Not a valid name', max_length: 'Username too long', min_length: 'Username too short' }
    }
  },
  nl: {
    labels: { name: 'Naam', password: 'Wachtwoord' },
    validation: {
      name: { invalid: 'Geen geldige naam', max_length: 'Naam te lang', min_length: 'Naam te kort' }
    }
  }
}
function changeLanguage(lang) {
  // label teksten aanpassen
  $('#form_id label').each(function(){
    $(this).html(dict[lang][$(this).attr('for')];
  });
}

// taal veranderen:
changeLanguage('nl');

_{niet getest, kan vast nog handiger}

Het geven van de juiste validatie meldingen is waarschijnlijk beter te regelen in de methode waar de validatie plaatsvindt.

Bedoel je zoiets?

[azerty]

Het origineel maakt een post naar http://web.geotracer.be/json/system/translate/list, welke een json object teruggeeft... Je zou dus zelf ook eens wat rond kunnen snuffelen in het gebruikte javascript en daar dan een verkorte versie uit distilleren? ^^ (zo zou ik het toch doen )

[Verwijderd]

Naar zo'n aanpak ben ik op zoek zwippie, super van je.

Echter raak ik in de knoop bij het lezen van deze lijn:

JavaScript:

$(this).html(dict[lang][$(this).attr('for')]);

Ik snap waar deze naar toe gaat maar alleen gebeurt er niks. Is er nog een missing part?

Uw code even in een test docje gegooid, gaf me dit: http://pastebin.com/05JdXAHt
Als ik dit aan de praat krijg, zag ik graag nog even hoe je de form validatie vertaling zou aanpakken want ik zie nog steeds zwart voor m'n ogen.

@wsitedesign: het lijkt erop dat wat jij kan, niet voor mij is weggelegd maar toch bedankt voor de suggestie

[Verwijderd]

Verwijderd schreef op maandag 05 maart 2012 @ 19:57:

JavaScript:

$(this).html(dict[lang][$(this).attr('for')]);

Ik snap waar deze naar toe gaat maar alleen gebeurt er niks. Is er nog een missing part?

Moet natuurlijk worden:

JavaScript:

$(this).html(dict[lang]["labels"][$(this).attr('for')]);

werkt best goed