Html two language option with button (without having to redirect to different page )

dubooduboo picture dubooduboo · Oct 27, 2018 · Viewed 24.8k times · Source

I'm trying to make second language option to the website. Here are the details for the project :

1) I'm not trying to use Google translator system or any other auto translator service to change the entire website language.

2) I only trying to translate the main description part in the website.

3) I already have written and saved translated version of the description text.

4)I also made a dropdown language option button in a separate file but under same template for both language.

So, to make it clear, my question is :

How can I use language option button to switch the language between English and Korean (from English to Korean, and from Korean to English depending on what user select) with the translated description text I have?

----- code below is the dropdown language option button ----------------

Answer

A. Meshu picture A. Meshu · Oct 27, 2018

This is how i do it when i build a multi-lingual website. I put notes inside the code for clarification.

<form>
    <label for="lang-switch">
        <span lang="ko">언어</span>
        <span lang="en">Language</span>
    </label>
    <select id="lang-switch">
        <option value="en">English</option>
        <option value="ko" selected>한국어</option>
    </select>
</form>

<p>
    <span lang="ko">한국어 텍스트</span>
    <span lang="en">Text in English</span>
</p>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$('[lang]').hide(); // hide all lang attributes on start.
$('[lang="ko"]').show(); // show just Korean text (you can change it)
$('#lang-switch').change(function () { // put onchange event when user select option from select
    var lang = $(this).val(); // decide which language to display using switch case. The rest is obvious (i think)
    switch (lang) {
        case 'en':
            $('[lang]').hide();
            $('[lang="en"]').show();
        break;
        case 'ko':
            $('[lang]').hide();
            $('[lang="ko"]').show();
        break;
        default:
            $('[lang]').hide();
            $('[lang="ko"]').show();
        }
});
</script>

Hope it solve your problem.

(since i don't speak Korean i used google-translate for the example)