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
– Navvy, Commented Mar 31, 2015 at 8:38

mohamedrias · Accepted Answer · 2015-03-31 08:39:32Z

6

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");
      }

  });

answered Mar 31, 2015 at 8:39

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Navvy Over a year ago

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

codingrose · Accepted Answer · 2015-03-31 08:38:15Z

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, 2015 at 8:38

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:17:54Z

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, 2017 at 12:17

CommunityBot

11 silver badge

answered Mar 31, 2015 at 8:38

Anas EL KORCHI

2,06818 silver badges26 bronze badges

Comments

ashwini · Accepted Answer · 2017-04-28 10:01:04Z

0

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); 
   }
});

answered Apr 28, 2017 at 10:01

ashwini

3753 silver badges9 bronze badges

1 Comment

ashwini Over a year ago

By using this method, you can pass values from one page to another without using 'localstorage'.

Collectives™ on Stack Overflow

Passing variable when opening another html page using JavaScript

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related