Passing a variable between 2 pages

**Sega** · Apr 29, 2012 23:25

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

Code:

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

JavaScript Code in Header

Code:

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

Javascript code in HTML

Code:

<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.

**paul_wilkins** · Apr 30, 2012 00:32

Originally Posted by Sega

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

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.

**Sega** · Apr 30, 2012 00:43

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.

Code:

	<!-- 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];
	}
	var color = gup( 'color' );	
</script>

	</head>

<body id="page-name" class="put-your-color-here put-your-background-here layout-1"> <!-- theme name; edit here -->
	<script>
		$(document).ready(function(){
			document.getElementById("page-name").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.

**Sega** · May 1, 2012 14:27

@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.

**paul_wilkins** · May 1, 2012 20:14

Originally Posted by Sega

I am not sure what I did wrong. It appears you cannot modify the id or class of a document dynamically.

Yes you can.

HTML Code:

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

Code javascript:

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 + '"');

Originally Posted by Sega

What would you normally do in this situation.

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

Code javascript:

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

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

**Sega** · May 1, 2012 22:05

@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:

Code:

<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.

**paul_wilkins** · May 2, 2012 04:17

Originally Posted by Sega

Ideally I want a link to contain a querystring, like '?color=black'

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

Code javascript:

// 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"

**Sega** · May 4, 2012 23:59

Thanks @paul_wilkins ;

User Tag List

Thread: Passing a variable between 2 pages

Thread Tools

Display

Passing a variable between 2 pages

Bookmarks

Bookmarks

Posting Permissions