How to make language drop down selected also stay on next page?

Question

I am using this code to change hyperlink of a button and now I want that if the person selects a language for example French so it will be automatically selected when the next page opens. If I move from page1.php to page2.php. The language on the next page should be automatically selected to French. Can anybody guide me how this can be done?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="custom.js">
</script>




  <select name="" id="lang">
    <option value="English">English</option>
    <option value="French">French</option>
    <option value="Spanish">Spanish</option>
  </select>

  <select name="" id="currency">
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="MXN">MXN</option>
  </select>

  <a href="" id="theButton">Click</a>
  
    <a href="test2.php">Click</a>

</body>

</html>

$(document).ready(function(){
var saveclass = null;

function onChangeHandler() {
  const lang = document.querySelector('#lang').value;
  const currency = document.querySelector('#currency').value;
  var strLink = "https://example.com/index.php?lang="+lang+"&currency="+currency;
  document.querySelector('#theButton').setAttribute('href', strLink);

}

onChangeHandler();

document.querySelector('#lang').addEventListener('change', onChangeHandler);
document.querySelector('#currency').addEventListener('change', onChangeHandler);

});

so you want to read the current URL of a page and take the language and currency from its parameters? — ecrb, Apr 19 '20 at 14:50
I am using dropdown which selects a language and the link on the click button gets updated. I want that if a person is browsing my website and select French as language, I want it to stay on next. So that he wouldn't have to select French again. — RockingPanda, Apr 19 '20 at 14:53

Nelson Rakson · Answer 1 · 2020-04-19T16:55:02.860

Latest Answer

index.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="custom.js"></script>
  <script type="text/javascript" src="cookie_script.js"></script>
</head>

<body>

  <select name="" id="lang">
    <option <?php if(@$_COOKIE['lang']=="English"){ echo "selected"; }?> value="English">English</option>
    <option <?php if(@$_COOKIE['lang']=="French"){ echo "selected"; }?> value="French">French</option>
    <option <?php if(@$_COOKIE['lang']=="Spanish"){ echo "selected"; }?> value="Spanish">Spanish</option>
  </select>

  <select name="" id="currency">
    <option <?php if(@$_COOKIE['currency']=="USD"){ echo "selected"; }?> value="USD">USD</option>
    <option <?php if(@$_COOKIE['currency']=="EUR"){ echo "selected"; }?> value="EUR">EUR</option>
    <option <?php if(@$_COOKIE['currency']=="MXN"){ echo "selected"; }?> value="MXN">MXN</option>
  </select>

  <a href="test2.php">Click</a>

</body>

</html>

cookie_script.js

$(document).ready(function(){
  $('#lang').on('change', function(){ document.cookie = "lang="+$(this).val()+"; path=/"; });
  $('#currency').on('change', function(){ document.cookie = "currency="+$(this).val()+"; path=/"; });
});

Always include

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="cookie_script.js"></script>

...on every page

It is not working. I believe the issue can be solved with the help of cookie storing. — RockingPanda, Apr 19 '20 at 15:09
Cookie would be perfect @RockingPanda I've updated the answer. You may try it. — Nelson Rakson, Apr 19 '20 at 15:36
It is working now but it is buggy. It will carry the value from page1.php to page2.php but when you move from page2.php to page1.php back. It gets bugged there. Or change the value on page2.php. — RockingPanda, Apr 19 '20 at 16:02
Check my latest answer and don't forget to mark if it solves your problem. Happy coding @RockingPanda — Nelson Rakson, Apr 19 '20 at 16:57

score 0 · Answer 2 · answered Apr 19 '20 at 15:06

On the next page, you need to read the URL and update your currency and language dropdowns with the values you got.

According to this post: How can I get query string values in JavaScript? you should use URLSearchParams.

Step 1 - Get the chosen language and currency values from the URL.

const urlParams = new URLSearchParams(window.location.search);
const language = urlParams.get('lang');
const currency = urlParams.get('currency');

Step 2 - Use the values to update the dropdown:

$('#lang').val(language);
$('#currency').val(currency);

If you don't want to keep doing this in every page, you can either save these settings in the client's machine (localStorage) or in a server.

I understood the above part. Can you guide me on this part? "save these settings in the client's machine (localStorage) or in a server" — RockingPanda, Apr 19 '20 at 21:59

How to make language drop down selected also stay on next page?

2 Answers2