How to add multi-language support to a captive portal?

Article describing the JavaScript code required for multi-language support on your captive portal

In order to allow for dynamic multi-language support, you need two pieces of 1) HTML and 2) JavaScript code. The HTML code required is below and displays a select box for switching between languages.

<label for="language" id="chooseLanguage">Choose language:</label> <select id="language" name="language" onchange="switchLanguage();"><option selected="selected" value="en">ENGLISH</option><option value="ja">JAPANESE</option> </select>

Next, you need to define the JavaScript switchLanguage() function, add a new <script> tag just before the ending </body>.

<script>

function switchLanguage(){

let lang = document.getElementById('language').value

if(lang == 'ja'){
document.getElementById('welcome').textContent = 'センティエントへようこそ';
document.getElementById('chooseLanguage').textContent = '言語を選択'
return false

}

if(lang == 'en'){
document.getElementById('welcome').textContent = 'Welcome to our free WiFi';
document.getElementById('chooseLanguage').textContent = 'Choose language:'
return false
}

}

</script>

You can also add automatic browser language detection using the following code snippet.

window.onload = function(){
var language = window.navigator.userLanguage || window.navigator.language;
if(language == 'ja'){
document.getElementById('language').value = 'ja'
switchLanguage()
}
}