Passing a variable between 2 pages

JavaScript
1

Hi there, I am working on passing a variable between 2 pages. The idea is to have you click on a normal anchor text link and pass over a querystring, from this querystring you’d create a variable and read it on the other page it’s linked to.

I did a bit of digging and found the following code, which did not really do anything for me:

HTML Code


<a href="index_1.htm?color=black" class="black">Black</a>

JavaScript Code in Header


	<script>
    // Adapted from examples on the Querystring homepage.
		var qs = new Querystring();
		var v1 = qs.get("color");
	</script>

Javascript code in HTML


<script type="text/javascript">document.write(v1);</script>

I am going to still continue with my digging and see what I can come up with.

2

Tht would be because the page from which you got that code, would have also had a Querystring scripting library, which you seem to be missing there.

3

I seam to have done quite a bit, and managed to find scripts to solve this issue. The entire notion of the script, so to add a CSS class onto the document, which would be part of a style swicher, if that makes sense.



	<!-- Getting QueryString from 2 HTML documents -->
	<script>
	function gup( name )
	{
	  name = name.replace(/[\\[]/,"\\\\\\[").replace(/[\\]]/,"\\\\\\]");
	  var regexS = "[\\\\?&]"+name+"=([^&#]*)";
	  var regex = new RegExp( regexS );
	  var results = regex.exec( window.location.href );
	  if( results == null )
		return "";
	  else
		return results[1];
	}
[B]	var color = gup( 'color' );[/B]	
</script>

	</head>

<body id="[B]page-name[/B]" class="[B]put-your-color-here[/B] put-your-background-here layout-1"> <!-- theme name; edit here -->
	<script>
		$(document).ready(function(){
			document.getElementById("[B]page-name[/B]").setAttribute("class", "helloworld");
		}
	</script>

Feel free to scrutinize my script so I can improve. I’ve already take a few code classes, but I have a long way to go before what I learned can be used into practice.

4

@paul_wilkins;

I am not sure what I did wrong. It appears you cannot modify the id or class of a document dynamically. What would you normally do in this situation. I don’t want to have 10+ diifferent HTML files in order to achieve something that could be done in 1 file.

5

Yes you can.

<div id="test" class="someClassName"></div>


var test = document.getElementById('test');
alert(test);
window.alert('The test div had an id of "' + test.id + '" and a class name of "' + test.className + '"');

test.id = 'somethingElse';
test.className = 'someOtherClassName';
window.alert('The test div now has an id of "' + test.id + '" and a class name of "' + test.className + '"');

What I would do is to stick with the scripting code you had right at the very start:


var qs = new Querystring();
var v1 = qs.get("color");

and to get the Querystring scripting library that allows that code to work.

6

@paul_wilkins;

Hi there, not through a pop-up window. Ideally I want a link to contain a querystring, like ‘?color=black’ and for this color to be placed in a class within the <body> tag on another page, if that at all makes sense.

The first piece of code works:


<script>
	function gup( name )
	{
	  name = name.replace(/[\\[]/,"\\\\\\[").replace(/[\\]]/,"\\\\\\]");
	  var regexS = "[\\\\?&]"+name+"=([^&#]*)";
	  var regex = new RegExp( regexS );
	  var results = regex.exec( window.location.href );
	  if( results == null )
		return "";
	  else
		return results[1];
	}
	var color = gup( 'color' );

This get’s the querystring from another page, but then I cannot do anything with is as my true goal is to change the <body> and add another class in there resembling the colour name, either being black, white, blue, green etc.

I will work on it and see what I can come up with, thanks again for your help.

Could you give me an example of putting “test.className” in the body tag. I think this would solve the issue.

7

Well if that’s all you’re going to have there then the easiest solution is with something like this:


// The querystring is the search part of the location object
var querystring = window.location.search,
    // The (...)? is for a non-greedy match, so that if multiple &'s are in there it only matches to the first
    // The &* is for 0 or more &'s, which allows the above match to be appropriately restricted within it
    match = querystring.match(/color=(.*)?&*/),
    // The match is an array containing two values.
    // The first value at [0] is what matches the entire regex, the second at [1] contains what is captured by the parenthesis
    color = match[1];

// The color variable is now "black" if the querystring was "?color=black"
8

Thanks @paul_wilkins;