Before I have a website that i built to switch from English to Dutch just by clicking on a hyperlink i.e <a> I had 2 files; de.php and en.php with following structures; de.php en.php To load a specific language. User only has to click on the hyperlink index.php Now, there's need for me to add other languages such as french,

Using the HTML Select tag to switch between languages in a multilingual website

Before
I have a website that i built to switch from English to Dutch just by clicking on a hyperlink i.e <a>
I had 2 files; de.php and en.php with following structures;

de.php

<?php
  $lang = array(
    "title" => "hengst Bank, bankieren kredietkaarten, Leningen en Merill Investeren www.stallionbank.com",
    "titleUserAccount"=>"Gebruikers account|Stallion Bank",
    "Home" => "Huis",
    "lang_en"=>"Engels",
    "lang_de"=>"Dutch"
    );
?>

JavaScript
​x
 
<?php  $lang = array(    "title" => "hengst Bank, bankieren kredietkaarten, Leningen en Merill Investeren www.stallionbank.com",    "titleUserAccount"=>"Gebruikers account|Stallion Bank",    "Home" => "Huis",    "lang_en"=>"Engels",    "lang_de"=>"Dutch"    );?>​

en.php

<?php
  $lang = array(
    "title" => "Stallion Bank&mdash; Banking, credit cards,Loans and Merill Investing www.stallionbank.com",
    "titleUserAccount"=>"User Account|Stallion Bank",
    "lang_en"=>"English",
    "lang_de"=>"Dutch"
    );
?>

JavaScript
 
<?php  $lang = array(    "title" => "Stallion Bank&mdash; Banking, credit cards,Loans and Merill Investing www.stallionbank.com",    "titleUserAccount"=>"User Account|Stallion Bank",    "lang_en"=>"English",    "lang_de"=>"Dutch"    );?>​

To load a specific language. User only has to click on the hyperlink

<a href="index.php?lang=en"><?php echo $lang['lang_en']?></a>
<a href="index.php?lang=de"><?php echo $lang['lang_de']?></a>

JavaScript
 
<a href="index.php?lang=en"><?php echo $lang['lang_en']?></a><a href="index.php?lang=de"><?php echo $lang['lang_de']?></a>​

index.php

<head>
  <title><?php echo $lang['title']?></title>
  <meta charset="utf-8">
  .....

JavaScript
 
<head>  <title><?php echo $lang['title']?></title>  <meta charset="utf-8">  .....​

Now, there’s need for me to add other languages such as french, portugese and spanish. so I prepared
fr.php, pt.php and sp.php ` fr.php

<?php

$lang = array(
  "title" => "Stallion Bank&mdash; bancaire, cartes de crédit,Prêts et Merill Investing www.stallionbank.com",
  "titleUserAccount"=>"Compte d'utilisateur|Stallion Bank",
  "lang_en"=>"Anglaise",
  "lang_fr"=>"French"
  );

JavaScript
 
<?php​$lang = array(  "title" => "Stallion Bank&mdash; bancaire, cartes de crédit,Prêts et Merill Investing www.stallionbank.com",  "titleUserAccount"=>"Compte d'utilisateur|Stallion Bank",  "lang_en"=>"Anglaise",  "lang_fr"=>"French"  );​

etc for pt.php and sp.php

having users using links to load lnaguage of their choice isnt so professional and may be cluster the website.
So resorted to using select tag.

index.php

<div align = "left">
  <select  name="lang" id="lang" onChange="window.location='index.php?lang='+this.value">
    <option value="en" <?php if( $lang =='en'){echo "selected";}?>>English</option>
    <option value="fr" <?php if( $lang =='fr'){echo "selected";}?>>French</option>
    <option value="de" <?php if( $lang =='de'){echo "selected";}?>>Dutch</option>
    <option value="sp" <?php if( $lang =='sp'){echo "selected";}?>>Spanish</option>
    <option value="pt" <?php if( $lang =='pt'){echo "selected";}?>>Portugese</option>
  </select>

JavaScript
 
<div align = "left">  <select  name="lang" id="lang" onChange="window.location='index.php?lang='+this.value">    <option value="en" <?php if( $lang =='en'){echo "selected";}?>>English</option>    <option value="fr" <?php if( $lang =='fr'){echo "selected";}?>>French</option>    <option value="de" <?php if( $lang =='de'){echo "selected";}?>>Dutch</option>    <option value="sp" <?php if( $lang =='sp'){echo "selected";}?>>Spanish</option>    <option value="pt" <?php if( $lang =='pt'){echo "selected";}?>>Portugese</option>  </select>​

How do I go about this so that if a user selects a particular langauge from the drop down menu, the index.php page will load the corresponding sp.php or pt.php or en.php or fr.php accordingly?

Do I need AJAX for this as the page will have to reload without user having to submit or button?Obviously, there is submit button.

You can visit www.betensured.com to see the behaviour am looking for.
Observe how the page changes upon selecting a different language from the drop-down menu.

Answer

Here’s what I’ve done in a project

<li class="lang">
  <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" 
          class="lang-selector">
    <option value="../en" class="lang-option">
      <a hreflang="EN" rel="alternate">En</a>
    </option>
    <option value="../fr/" class="lang-option" selected>
      <a hreflang="FR" rel="alternate">Fr</a>
    </option>
  </select>
</li>

JavaScript
 
<li class="lang">  <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);"           class="lang-selector">    <option value="../en" class="lang-option">      <a hreflang="EN" rel="alternate">En</a>    </option>    <option value="../fr/" class="lang-option" selected>      <a hreflang="FR" rel="alternate">Fr</a>    </option>  </select></li>​

At the root of the project I had my languages sections (/fr/ , /en/, /esp/ …) each directory contain an index.php file, so when I select my language option the selected_language/index.php is loaded

Advertisement

Answer