Question posted in
You can find the official documentation here.

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

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"
    );
?>

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"
    );
?>

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>

index.php

<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"
  );

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>

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.

Tags:

2

Answers


  1. 0

    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>

    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

    Login or Signup to reply.
  2. 0

    If it helps …

    (function()  // IIFE
  {
  const defaultLang  = 'en'
    ,   langSelector = document.getElementById('lang-select')
    ,   htmlTag    = document.querySelector('html')
    ,   langElms   = [...document.querySelectorAll('*[lang]')]
    ,   docTitle   = 
          { en: 'English document title'
          , fr: 'Titre Français pour le document '
          }
  // remove <html lang="en"> from langElms
  let i_html = langElms.findIndex(el=>el===htmlTag)
  if (i_html>-1)  langElms.splice(i_html,1)  

  // set initial language according to browser language, or default Lang if this none of site languages
  let initLang = (navigator.language || navigator.userLanguage || defaultLang).substring(0,2)
  if (!docTitle[initLang])  initLang = defaultLang

  langSelector.value = initLang
  showLang()

  function showLang()
    {
    let lang = langSelector.value
    htmlTag.lang   = lang
    document.title = docTitle[lang]

    langElms.forEach(el=>
      {
      if (el.lang===lang) el.classList.remove('noDisplay')
      else                el.classList.add('noDisplay')
      })
    }

  // the final touch !
  langSelector.onchange = showLang
  })()
    .noDisplay {
  display: none !important;
  }
  
  /* cosmetic part */
div {
  display: inline-block;
  border: 1px solid grey;
  margin: .5em;
  padding: .5em;
  }
    <select id="lang-select">
    <option value="en">English</option>
    <option value="fr">Français</option>
  </select>

  <p lang="fr">ce paragraphe est en Français</p>
  <p lang="en">this paragraph is in English</p>

  <div lang="fr">ce block est en Français</div>
  <div lang="en">this block is in English</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search