Open window which user select language

Question

Here is a short form for selecting language for a webpage, There are two languages one is marathi and another is english actually what I want is like: when a user select english language and submit the form english.html page should open and when user select marathi language marathi.html page should open.

<html>
<head>
    <title>Select Language</title>
        <link rel="icon" href="hen.png">

<form>
<center>
    <p id="p1">
    Language:<select>
            <option id="English" >English</option>
            <option id="Marathi" >Marathi</option>
            </select>
    </p>
        <input type="submit" id="button" value="Open" >
</center>
</form>
</html>

You want to redirect to a page based on the user's choice? – Carl Binalla Apr 18 '17 at 10:49 — Carl Binalla, Apr 18 '17 at 10:49

Praveen Rana · Answer 1 · 2017-04-18T11:08:34.650

You can use this as a reference, considering english.html and marathi.html as your targeting pages, you can change them accordingly

<html>

<head>
    <title>Select Language</title>
    <link rel="icon" href="hen.png">
    <script>
        $('#button').click(function() {
            var selected = $('#language option:selected');
            window.location.href = selected + ".html"
        })
    </script>
</head>

<body>

    <form>
        <center>
            <p id="p1">
                Language:
                <select id="language">
                    <option id="English">English</option>
                    <option id="Marathi">Marathi</option>
                </select>
            </p>
            <input type="submit" id="button" value="Open">
        </center>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

score 0 · Answer 2 · answered Apr 18 '17 at 10:53

0

I think its obviously, but please do not repeat it at production:

 <input type="submit" id="button" onclick="window.locaton.href='lol/'+$('select').val()+'.html'" value="Open" >

answered Apr 18 '17 at 10:53

Why not repeat it at production? – Reinstate Monica Cellio Apr 18 '17 at 12:25
because it's tottaly unclear and 0-maintained. as better alternative: @Praveen Rana answer http://stackoverflow.com/a/43470354/4074041. But in real world, you need use some MVVM pattern (not necessarily a framework), for detach logic and ui. – Apr 18 '17 at 12:27
Fair enough. I disagree for something so basic, but it's a valid point. – Reinstate Monica Cellio Apr 18 '17 at 12:28

score 0 · Answer 3 · answered Apr 18 '17 at 11:15

0

Here is easy way;

<select name="forma" onchange="location = this.value;"> <option value="english.html">English</option> <option value="marathi.html">Marathi</option> </select>

answered Apr 18 '17 at 11:15

Tamang

1
2

score 0 · Answer 4 · answered Apr 19 '17 at 04:38

if you want to create this using simple Javascript then use location.href = "yourPageAddress";

here is the sample code i have written for the same:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <script type="text/javascript">
        function MyFunction(){
            var getValue = document.getElementById("language");
            //console.log(getValue);
            var getIndexValue = getValue.options[getValue.selectedIndex].value;
            //console.log(getValue.selectedIndex);
            //console.log(getIndexValue);

            if(getValue.selectedIndex == 1){
                //console.log("English")
                location.href = "http://www.google.com";
            }
            else if(getValue.selectedIndex == 2){
                //console.log("Marathi");
                location.href = "http://www.yahoo.com";
            }
            else{
                console.log("Wrong Option Selected.");
            }
        }
    </script>
</head>
<body>
Language:
<select name="language" id="language">
    <option>Select..</option>
    <option value="https://www.google.com" id="english">English</option>
    <option value="https://www.yahoo.com" id="marathi">Marathi</option>
</select>
<br>
<button name="submit" id="submit" onclick="MyFunction()">Submit</button>
</body>
</html>

This is just the one way where you can redirect the user to selected page, there are many different ways also to execute the same operation. You may find some console.log statement marked comment, which was just used for debugging purpose.

Open window which user select language

4 Answers4