CODEWITHSUNDEEP
javascript
Scott
Scott

Reputation: 43

Pass JavaScript variable through URL

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?

Upvotes: 3

Views: 10617

Answers (4)

Joshua
Joshua

Reputation: 3603

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/

Upvotes: 1

dimusic
dimusic

Reputation: 4133

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

Upvotes: 2

Justin Ethier
Justin Ethier

Reputation: 134157

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.

Upvotes: 0

FunkyMonk91
FunkyMonk91

Reputation: 1481

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'];

Upvotes: 0

Related Questions