SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Passing a variable between 2 pages

    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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sega View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  4. #4
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sega View Post
    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 + '"');

    Quote Originally Posted by Sega View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    @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.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Sega View Post
    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"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,376
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Thanks @paul_wilkins ;
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •