preselect option value after href

Question

Lets say I got 4 buttons like this, which all sends me to another page:

<a href = "room.php">
  <button>Click me1</button>
</a>
<a href = "room.php">
  <button>Click me2</button>
</a>
<a href = "room.php">
  <button>Click me3</button>
</a>
<a href = "room.php">
  <button>Click me4</button>
</a>

The next page (room.php) has a select tag which contains 4 different option values.

<select name ="room">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select>

My question is if I can preselcect Room 3 if button nr 3 is pressed and room 4 if button 4 is pressed and so on...

Does this answer your question? [Share data between html pages](https://stackoverflow.com/questions/11609376/share-data-between-html-pages) — ikiK, Oct 11 '20 at 19:12
so if I write a function on my other file I can trigger that function with share data — , Oct 11 '20 at 19:37
Yes, you can access to your sessionStorage from all the pages. The data is different by domains. — Asaf, Oct 11 '20 at 20:06

score 0 · Answer 1 · answered Oct 11 '20 at 20:34

assume that in your html of your index is:

<a href = "room.php?roomId=1">
  <button>Click me1</button>
</a>
<a href = "room.php?roomId=2">
  <button>Click me2</button>
</a>
<a href = "room.php?roomId=3">
  <button>Click me3</button>
</a>
<a href = "room.php?roomId=4">
  <button>Click me4</button>
</a>

now in room.php you have a selectBox same as follow:

<select name="room">
   <option value="Room1">Room 1</option>
   <option value="Room2">Room 2</option>
   <option value="Room3">Room 3</option>
   <option value="Room4">Room 4</option>
</select>

now only add bellow script at end of room.php page:

<script>
    let paramsIndex = document.URL.indexOf("?");
    let params="";
    if(paramsIndex>0)
        params=document.URL.substring(paramsIndex+1, document.URL.length).split("&");
    let result = [];
    for(let i=0;i<params.length;i++)
    {
        result.push({"key":params[i].split("=")[0].toString(),"value":params[i].split("=")[1].toString()})
    }
    passedValue = result.find(x=>x.key="roomId").value;
    let selectField = document.getElementsByName("room")[0];
    selectField.value = passedValue;
</script>

the ?roomId=1 gets passed down but of some reason the select is totaly empty now for me atleast, you know why that is?:) — , Oct 12 '20 at 08:14

score 0 · Accepted Answer · answered Oct 12 '20 at 18:49

As it has been stated, there are several possible ways to achieve the end result:

localStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Cookies https://www.quirksmode.org/js/cookies.html
Querystrings, likely the easiest ...

The links would use a querystring like so .. room.php?roomId=Room2

(function($){

  function getUrlParam(param, query) {
    query = query ? query : location.search.substring(1);
    var data = {};
    if (!query) return data;
    var vars = query.split('&'), i;
    for (i = 0, n = vars.length; i < n; i++) {
      var pair = vars[i].split('=');
      var name = decodeURIComponent(pair[0]);
      var value = decodeURIComponent(pair[1]);
      data[name] = value;
      if (name == param) return value;
    }
    return data;
  }

  // use for testing/debug a defined querystring
  $('select[name="room"]').val(getUrlParam('roomId', 'roomId=Room2'));
  
  // use real querystring in the url
  // $('select[name="room"]').val(getUrlParam('roomId'));

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name="room">
  <option value="Room1">Room 1</option>
  <option value="Room2">Room 2</option>
  <option value="Room3">Room 3</option>
  <option value="Room4">Room 4</option>
</select>

Thanks for your explenation, I understand the querystring but I have to take a look into the code more, thanks alot!:) — , Oct 13 '20 at 08:04

preselect option value after href

2 Answers2