The language drop down menu changes links but doesn't stay on the language selected

Question

If you run the code you will see a drop down menu with a bunch of different languages. If you select the language AND hit submit, the drop-down menu will automatically go back to the top of the list instead of staying on what you selected. So what I'm trying to do is make the language bar stay to that language after you hit the submit button.

<body>

  <header>

    <div id="country-select">
      <form action="" method="get">
        <select id="locale" name="locale">
   <option value="en_US" title='1'>English(US)</option>
          <option value="en_GB" title='2'>English(UK)</option>
          <option value="bg_BG" title='3'>Bulgarian</option>
          <option value="cs_CS" title='4'>Czech</option>
          <option value="da_DK" title='5'>Danish</option>
          <option value="de_DE" title='6'>German</option>
          <option value="ek_GR" title='7'>Greek</option>
          <option value="es_ES" title='8'>Spanish</option>
          <option value="et_ET" title='9'>Estonian</option>
          <option value="fi_FI" title='10'>Finnish</option>
          <option value="fr_FR" title='11'>French</option>
          <option value="hu_HU" title='12'>Hungarian</option>
          <option value="it_IT" title='13'>Italian</option>
          <option value="lt_LT" title='14'>Lithuanian</option>
          <option value="lv_LV" title='15'>Latvian</option>
          <option value="nl_NL" title='16'>Dutch</option>
          <option value="no_NO" title='17'>Norwegian</option>
          <option value="pl_PL" title='18'>Polish</option>
          <option value="pt_PT" title='19'>Portugese</option>
          <option value="ro_RO" title='20'>Romanian</option>
          <option value="sk_SK" title='21'>Slovak</option>
          <option value="sl_SL" title='22'>Slovenian</option>
          <option value="sv_SE" title='23'>Swedish</option>
        </select>
        <input value="Select" type="submit" />
      </form>
    </div>
  </header>
  <script>


      // creates the page dynamically
      function GetSelectedItem() {
        var option = document.getElementById("locale").value;
      }

  </script>
</body>

The `submit` button causes the form to post to the server. If you want to pre-select an item in the `select` then do that in the server-side code which handles the form post. What server-side language are you even using? What are you doing with the form post in that code? — David, Jun 24 '16 at 14:40
@David Thanks for answering David. So it wouldn't be possible with Javascript? I would probably have to use PHP? — Giorgio, Jun 24 '16 at 14:40
*What* wouldn't be possible with JavaScript? You haven't specified what you're trying to do. You just have a simple form which posts back to the server. It doesn't *do* anything. — David, Jun 24 '16 at 14:41
Well if you run the code (Not on stackoverflow because it doesn't show the problem on there) this toolbar would pop up correct? If I selected Italian the link would change correctly but the that dropdown menu will automatically go back to English(US) but the link stays on the Italian extension. What I want is for that toolbar/drop-down-menu to stay on Italian after hitting the Submit/Select button — Giorgio, Jun 24 '16 at 14:44
You can get a query string value in JavaScript: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript Then use that value to set the value of the `select` element. — David, Jun 24 '16 at 14:48
@David Thanks David, so get the url and split the string? Got it thanks for your help — Giorgio, Jun 24 '16 at 14:59
@David Thanks so much David I got it working I really appreciate your help! — Giorgio, Jun 24 '16 at 16:51
Possible duplicate of [How to select a value in dropdown javascript?](http://stackoverflow.com/questions/8140862/how-to-select-a-value-in-dropdown-javascript) — Ryan Bemrose, Jun 24 '16 at 22:49

Dylan Wheeler · Accepted Answer · 2016-06-24T14:48:35.753

0

You need to implement a few more pieces of code in order for this to happen the way you desire. Right now, hitting submit does absolutely nothing. The next time your page is loaded, the select box defaults to the top option because it doesn't remember what option was last selected! Through the form submission, you would need to use a tool to communicate with a database to save the selection.

My suggestion would be using PHP to either write to a file or communicate to an SQL database. I'm not sure what the application for this is, so it is hard for me to suggest the best option.

Using PHP, the form method would need to be changed from "get" to "POST":

<form action="submit.php" method="POST">

The following submit.php script would look similar to this:

<?php
    $selection = $_POST['locale'];
    //do something to save the selection here
?>

More information on saving data to SQL is available here: http://www.w3schools.com/php/php_mysql_insert.asp

edited Jun 24 '16 at 14:48

answered Jun 24 '16 at 14:42

Dylan Wheeler

6,928
14
56
80

Exactly my issue @Confiqure thanks so much! So I would have to use PHP but would I have to make a database? What this toolbar/drop-down-menu does is switches the language of the page but I'm just making the toolbar for now – Giorgio Jun 24 '16 at 14:45
If your website has multiple users, I would suggest making an SQL database and then using PHP to communicate with the database and save the user's selection. You would then need to tweak the HTML form by adding in a little more PHP to detect if an option has already been saved in SQL and if so, make the default option the option that has been saved – Dylan Wheeler Jun 24 '16 at 14:47
awesome thanks so much! – Giorgio Jun 24 '16 at 14:48
I've amended my answer to provide you with a little more information on communicating with SQL databases – Dylan Wheeler Jun 24 '16 at 14:49
Okay great thanks for catching my error with the Javascript code. I really appreciate all your help! – Giorgio Jun 24 '16 at 14:49
If all he wants to do is set the `select` value, a database isn't necessary or even relevant. Nor does he have to change from GET to POST. He doesn't even really need server-side code at all. And w3schools is one of the worst resources to suggest. This is vastly overcomplicating an otherwise simple question. – David Jun 24 '16 at 14:50
@David it seems to me that he wants the user to choose a language and then remember it for a later time. I see no other way of achieving this. – Dylan Wheeler Jun 24 '16 at 14:51
@Giorgio: Do you want this information to be stored for later use? Or do you just want the `select` to retain the previous selection when the page re-loads? The former would involve storing the data somewhere, likely server-side. The latter involves a few lines of server-side *or* client-side code. (That is, for the latter the use of PHP and MySQL would be vastly overkill.) – David Jun 24 '16 at 14:53
@David No information to be stored for now I just want the select to retain the previous election when the page re-loads. – Giorgio Jun 24 '16 at 14:56

score 0 · Answer 2 · answered Jun 24 '16 at 14:50

<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
  if(!empty($_GET['locale'])){
    $languange = $_GET['locale'];
  }
}
?>
<body>

  <header>

    <div id="country-select">
      <form action="thispage.php" method="get">
        <select id="locale" name="locale">
        <option <?php if($language == "en_US")? echo "selected" ?> value="en_US" title='1'>English(US)</option>

        </select>
        <input value="Select" type="submit" />
      </form>
    </div>
  </header>

Basically put the php snippet in each option and when you do the submit it'll keep the value

Thanks so much Pyrox, I'll try whatever method I possibly can to make this work — Giorgio, Jun 24 '16 at 14:51

The language drop down menu changes links but doesn't stay on the language selected

2 Answers2