Pass JavaScript variable through URL

Question

I have a page that sets a few variables using javascript Math.random() as shown.

var RandomValue1 = Math.floor(Math.random() * 5);
var RandomValue2 = Math.floor(Math.random() * 6);
var string = array1[RandomValue1];
var string = array2[RandomValue2];

I would like to allow a user to pass the RandomValue value through the URL to another person. When the second person goes to the shared URL, RandomValue is the value as the first person - so that the second person sees the same 'string' as the first person.

I am fairly new to web design and web programming so I don't know if this needs to be handled on the server-side or client-side.

I assume I need to pass a url something like page1.html?RandomValue1=1&RandomValue2=3 but I cannot get the page to then set those variables and load. Can this be done in JavaScript?

dimusic · Accepted Answer · 2013-01-23 20:56:44Z

2

You can read GET variables with javascript. Here is an example function (source):

function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
  });
  return vars;
}

Usage:

var first = getUrlVars()["id"];
var second = getUrlVars()["page"];

alert(first);
alert(second);

answered Jan 23, 2013 at 20:56

dimusic

4,1332 gold badges31 silver badges33 bronze badges

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

1 Comment

Scott Over a year ago

I just implemented this method and it worked like a charm! Thank you! I will have to investigate more what the var part is doing - .replace(???)function.. - I don't quite understand, but I was able to pull the data I needed from the URL. Again many thanks!

Joshua · Accepted Answer · 2013-01-23 20:59:22Z

Your assumption is correct. You need to put those variables into the URL as PARAMETERS. I would further suggest using a "#" instead of actual parameters so you don't risk updating the page each time, so the URL would look like mydomain.com/page.html#RandomValue1=1&RandomValue2=3.

You can use Javascript to get / set those parameters by the window.location.href method. On page load, the Javascript will check to see whether there is a "#" and parse anything after it in the URL. After the page has loaded, a Javascript can be used to update those parameters.

See the following link for full documentation on how to use window.location:

https://developer.mozilla.org/en-US/docs/DOM/window.location

Oh, and here's a javascript library that might help get you there faster. It works with the hash ('#') and will automatically parse (deparameterize) the parameters for you, assigning them to strings / objects etc. which you can then use.

http://benalman.com/projects/jquery-bbq-plugin/

FunkyMonk91 · Accepted Answer · 2013-01-23 20:50:39Z

0

I would do it in PHP.

You can put a hidden field on your page (in a form). Set the form method to GET and have the action set to another PHP page.

<form id="form" name="form" action="my_page.php" method="GET">
  <input id="myId" name="myName" type="hidden />
</form>

In the PHP page you can manage the variables with the $_GET object.

<?php
  if(isset($_GET['myName'])){
    //do something with value;
  }
?>

Just remember that the GET and POST variables are based off the name attribute from the HTML elements. In my example, the hidden field has the name myName, so when I want to refer to it I use $_GET['myName'];

answered Jan 23, 2013 at 20:50

FunkyMonk91

1,4811 gold badge17 silver badges30 bronze badges

Comments

Justin Ethier · Accepted Answer · 2013-01-23 20:52:48Z

0

You will need to use the server to coordinate the data between both clients. In other words, the first user would need to submit their random value to the server - this could be done using a GET URL like page1.html?RandomValue1=1 although you might want to research POST requests.

Anyway, the second user could then go to the shared URL to see the value stored on the server.

answered Jan 23, 2013 at 20:52

Justin Ethier

135k53 gold badges235 silver badges290 bronze badges

Collectives™ on Stack Overflow

Pass JavaScript variable through URL

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related