Passing variable when opening another html page using JavaScript

Question

This is probably a really silly question, but I can't find it online anywhere and I've been looking for at least an hour.

I have a link <a href="MusicMe.html" id="instrumentsNav">Instruments</a> which I want to get the ID of it once clicked, as I need to pass some variable to the page I am opening to know that the instruments link was clicked. This is being called from productInformation.html

I have also tried doing <a href="#" onclick="instrumentsClick()" id="instrumentsNav">Instruments</a> and then in my JavaScript, window.open("MusicMe.html", "_self"); and then tried passing a variable that way, but still absolutely no luck. Any help as to how I would pass a variable back to the page when it opens would be brilliant.

Once it opens, I am using the variable to set the ID of an element so it only displays a certain set of the information, which is working on it's own, but when I go back to try and call it, it's always thinking it is showing them all as I cannot work out how to set the variable to define it. Unfortunately I need to use JavaScript not PHP.

Thanks.

Yes but then, in the function I used window.open and couldn't work out how to pass the ID when I was opening the html — Navvy, Mar 31 '15 at 08:38

score 6 · Accepted Answer · answered Mar 31 '15 at 08:39

I would just tell you some ways, hope you would be able to implement it:

Use query params to pass the variable.

When you're navigating to another page, add query params to the url.

window.open("MusicMe.html?variable=value", "_self");

In your next page, check for queryParam by getting window.location.href and using regex to split the params after ? and get that data.

Use localStorage/cookies

Before navigating to the next page, set a variable in your localStorage

localStorage.setItem("variable","value");
window.open("MusicMe.html", "_self");

In your second page, in the window load event.

 $(function() {
      if(localStorage.getItem("variable")) {

       // set the ID here
       // after setting remember to remove it, if it's not required
       localStorage.removeItem("variable");
      }

  });

Thank you so much, I got it now :) I'd tried the second earlier but it wasn't returning anything for some reason, but the first works brilliantly and I understand it now — Navvy, Mar 31 '15 at 08:58

score 1 · Answer 2 · answered Mar 31 '15 at 08:38

1

You can use localStorage to keep the value, or use parameter like

href="MusicMe.html?id=111"

to pass the value to new page.

answered Mar 31 '15 at 08:38

codingrose

15,563
11
39
58

score 1 · Answer 3 · edited May 23 '17 at 12:17

1

You can always pass a GET variable in you re URL just like this myhost.com?var=value You can get the value of this variable by parsing the URL using Js see this

How can I get query string values in JavaScript?

edited May 23 '17 at 12:17

Community

1
1

answered Mar 31 '15 at 08:38

Anas EL KORCHI

2,008
18
25

score 0 · Answer 4 · answered Apr 28 '17 at 10:01

You can simply pass # value into url, get it and then match it with 'rel' attribute given on specified element. Here I have done materialize collapsible open from link on another page.

JS:

var locationHash = window.location.hash;
var hashSplit = locationHash.split('#');
var currentTab = hashSplit[1];
$('.collapsible > li').each(function() {
   var allRels = $(this).attr('rel');
   if(currentTab == allRels){
       $(this).find('.collapsible-header').addClass('active');  
       $(this).attr('id',currentTab); 
   }
});

By using this method, you can pass values from one page to another without using 'localstorage'. — ashwini, May 02 '17 at 12:30

Passing variable when opening another html page using JavaScript

4 Answers4

Linked