How to use google translator on a web site without using the combo box to change language?

Question

I want to add the multi languages features on my website so I've added the google translate tool (Translate Tool) but I want to translate the website only when the user click on a button in the page and not when it uses the combo! Is there any way to change automatically the value of the combo when a button is clicked?

This is the code of the translate tools:

 <div id="google_translate_element"></div><script type="text/javascript">
      function googleTranslateElementInit() {
      new google.translate.TranslateElement({ pageLanguage: 'it', autoDisplay: false },'google_translate_element');
                                         }
 </script>
 <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

I'm trying to change the value of the containing the languages.

<script>
window.onclick = function() {
    var container = document.getElementById('google_translate_element');
    var select = container.getElementsByTagName('select')[0];
    select.value="en";
}
</script>

This code works and the selected value changes but only that! The page is not translated. I think that I have to validate this operation! Anyone knows how I can do that?

score 4 · Answer 1 · answered Jan 08 '14 at 17:38

I created a PHP class for an open source project:

---// source code of google_translate.php //----

<?php

class google_translate{

    public $original_language;
    public $translate;
    public $domain;


    function __construct ($original_language, $translate, $domain){
        $this->original_language = $original_language;      
        $this->translate = $translate;
        $this->domain = $domain;
    }   

    function translate(){


        $url = "http://translate.googleusercontent.com/translate_c?act=url&depth=1&hl=" . $this->original_language;
        $url .= "&ie=UTF8&prev=_t&rurl=translate.google.com&sl=" .  $this->original_language;
        $url .= "&tl=". $this->translate;
        $url .= "&u=" . $this->domain;


        echo "<script language=\"javascript\">document.location=\"$url\"</script>";             


    }


}
?>

---// source code of google_translate.php //----

This script works in combination with another script, named translate.php.

---// source code of translate.php //----

<?php


include_once("include/google_translate.php");
?>
<form method="post">
<table width="640" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/language/choose_your_language.jpg" width="640" height="360" /></td>
  </tr>
    <tr>
    <td valign="top" align="left">
    <select name="language">
    <?php echo $default_language; ?>
        <option value="ar">Arabic</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bs">Bosnian</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese (China)</option>
        <option value="zh-TW">Chinese (Taiwan)</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="fil">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="he">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="id">Indonesian</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
       <option value="mr">Marathi</option>       
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt-BR">Portuguese (Brazil)</option>
        <option value="pt-PT">Portuguese (Portugal)</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sv">Swedish</option>
        <option value="sw">Swahili</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="vi">Vietnamese</option>
      </select>
    </td>   
    </tr>
    <tr>
     <td valign="top" align="left">
      <input name="submit" type="submit" value="Translate" /></td>
  </tr>
 </table>
</form>

---// source code of translate.php //----

And below you see an example of the code how it's used in Horizon QCMS:

---// how to use the code //----

<?php

include_once('translate.php');

# Google translator
# script generated with Horizon QCMS 4


if(isset($_POST['submit'])){

    $language='en';
    $translate = new google_translate('en', $_POST['language'], 'http://www.hnqcms.com/wiki/');
    $translate->translate();
}

---// how to use the code //----

A working example can be found here: http://www.hnqcms.com/wiki/index-page-28-category-28.html

P.s. You can of course adjust the script a bit so that the user doesn't have to click on the "submit" button.

You can also create a form with a get statement:
– Cynthia Fridsma Jan 09 '14 at 14:05 — Cynthia Fridsma, Jan 09 '14 at 14:05

score 0 · Answer 2 · answered Jan 08 '14 at 15:10

0

manually

redirects to google translate translate button example only works online
here code jsfiddle

otherwise

I hope that is what you want

answered Jan 08 '14 at 15:10

alessandrio

4,282
2
29
40

I tried this solution but it show me the translation bar in the top of the page. – Magic AndWebDev Jan 08 '14 at 15:26

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

I posted this answer which may help you. It uses two javascript functions to set and get the cookie 'googtrans'. If present, Google Website Translator gets its value and translates the page accordingly. The case in the answer applies to just one flag in a link to change language, but it can easily be extended.

edited May 23 '17 at 10:28

Community

1
1

answered Mar 23 '14 at 23:59

Quiquetas

427
7
10

How to use google translator on a web site without using the combo box to change language?

3 Answers3

manually