CodingForums.com - How to collect variables from a URL, insert them into an array and dynamically change

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - How to collect variables from a URL, insert them into an array and dynamically change (http://www.codingforums.com/showthread.php?t=273333)

How to collect variables from a URL, insert them into an array and dynamically change

How to collect variables from a URL, insert them into an array and dynamically change a href URLs?

Hi

I'm not a developer so please be easy on me here! I am familiar with HTML and not bad at taking snippets of code from various sources and cobbling them together. I've been looking around and just can't seem to find exactly what I need. Very close and yet so far.. Please help!

What I want to do is:

1. collect variables from the URL like this (www.myurl.com/index.html?var1=1&var2=2&var3=3 etc. etc..)

2. Take those variables and insert them into an array while stripping out the un-needed parts. I found this code which gets it but prints it on the screen, which I don't need..

[CODE]

myurl.com/index.html?log=1&pass=2

function addComment()
{
var parameters = location.search.substring(1).split("&");

var temp = parameters[0].split("=");
l = unescape(temp[1]);

temp = parameters[1].split("=");
c = unescape(temp[1]);

document.getElementById("log").innerHTML = l;
document.getElementById("pass").innerHTML = c;
}
addComment();

<p>http://www.myurl.com/</b><span id="log" ></span></p>
<p>http://www.myurl.com/</b><span id="pass"></span></p>

</script>

[CODE]

3. Dynamically alter a href tags on the fly based on the parameters gathered from the URL.

I found this code which works great to alter the URLs but (a) the variable is gathered from an input form and I need to be able to take them from the URL. (b) I also need several of them (could be like 20) so an array is needed.

[CODE]

<input type="text" id="mySearchBox" /> <a href="myurl.com/index.html?"; onclick="this.href+=+document.getElementById('mySearchBox').value">Enter Parameter</a>

[CODE]

Regarding the technology... I'm not stuck on any particular language or method but javascript and the jquery seems to be the easiest for me. I haven't done much with PHP and other languages. The easiest method for dummies you can provide the better.

I'm sure this is like elementary school stuff to you out there but I just can't seem to figure it out so your advice is much appreciated!

Code:

<script type="text/javascript">

var querystring = [];

if ( location.search > 1 )

{

    var temp = location.search.substring(1).split("&");

    for ( var t = 0; t < temp.length; ++t )

    {

        var pair = temp[t].split(".");

        querystring[ pair[0] ] = decodeURIComponent( pair[1] );

    }

}

// at this point the variable querystring contains all the key/value pairs from the passed-in query string.

// for example, if the URL was xxx?foo=bar&glomp=the%20widget

// then the querystring variable will consist of

//        qs["foo"] == "bar"

//        qs["glomp"] == "the widget"

//

// to get all the name/pair combinations out of querystring you could do, for example:

for ( var name in querystring )

{

    document.write( name + "==" + qs[name] + "<br/>" );

}

// though please don't really use document.write.

Doing this with jQuery would actually be MORE complex than the plain vanilla JavaScript shown above.

Quote:

3. Dynamically alter a href tags on the fly based on the parameters gathered from the URL.

Don't do that. Or at least not as you have written it.

Instead, have the onclick for the <a> invoke a JavaScript function that picks up the href, alters/appends to include the querystring pairs, and then just does location.href = ...the altered url...

That way you have one function that can handle multiple <a> tags, doing the same thing for each.

Thank you for your detailed reply with comments! That was very helpful to gather the variables. Now I'm left hanging with getting them into those <a> tags. I hate to request to be spoon fed here but need a little more help to get to the correct syntax for:

[CODE]

1. <a href="www.myurl.com/index.html?"+'foo'>link1</a>
resulting in the a tag hyperlink www.myurl.com/index.html?bar
... or the addition of the <img src="./images/.."> tag so I can link an image to that dynamic URL

2. <iframe src="www.myurl.com/index.html?"+'glomp'></iframe>
resulting in the iframe opening for www.myurl.com/index.html?the%20widget

[CODE]

Again, my apologies for being thick here! Thank you..

One more thing..

To provide context, this is an example of the type of page I am working on

http://www.doxietalk.com/doxiecalendars.html

The 2 dynamic objects are:

1. The banner (which will change per breed)
2. The black buttons (all of the URLs are the same. The only thing that changes is the last digits after the "=" (node=x)).
3. The iFrame on the bottom. Same syntax as the 2nd URL

Can you be more specifiic? Where do those numbers (for the node=x, for example) come from? I don's see any numbers in the querystring.

For example, if I choose "collie" in the breeds dropdown, the URL is just http://www.doxietalk.com/breeds/collie.html

No querystring at all there. Where would your numbers for node=x comefrom???

Thank you again for your patience and support!

There are 2 kinds of links. The ones automatically generated by Amazon are as follows. They are all the same except for the the very last digit. By simply changing that node number, I can control the entire page (a tags and iframe tags).

http://astore.amazon.com/dogietalk-2...ng=UTF8&node=1
1=Doxie Calendars
66=Chihuahua Calendars
67=Boxer Books
60=Dachshund watches
etc

So I can easily hard code the navigation links to end up one one of these pages and there is no need to store that value anywhere.

The second type are to images and links on my own site. I can easily control them by simply changing name of the graphic or html page to match that. So for example a href="www.mysite.com/images/"+xyz.jpg when xyz is entered through the URL like www.mysite.com/thispage.html?banner1=xyz

Once I understand how to generate the syntax, I can keep using this formula anywhere in the site instead of creating static html pages for every breeed as you see now, which is obviously a pain and not a very elegant solution. This is exactly what I want to avoid doing.

Does that make sense?

It all makes sense, but I see no reason to use the querystring to pass tons of numbers along. It would look bad.

Instead, just look at the page URL, pick up the name of the breed, and use that to index into a table that has all the data.

For example, instead of using a URL like
http://www.doxietalk.com/breeds/collie.html
you might use
http://www.doxietalk.com/breeds.html?collie

And now you just look for the breed name after the question mark and do everything based off of a master JavaScript table.

Example:

Code:

<html>

<head>

<style type="text/css">

a.kig img {

    border: none;

    width: 295px; height: 97px;

}

</style>

</head>

<body>

<a id="logo" title="Homepage" href="../index.html">

    <img id="logoimage" alt="" />

</a>

...

<iframe name="doxiestore" id="amazon" width="100%" height="4000" frameborder="0" scrolling="no"></iframe>

...



<script type="text/javascript">

var masterTable = {

   "boxer" : { "image" : "boxer.jpg", "iframe" : "dtboxer-20" },

   "chihuahua" : { ...  },

   ... etc ...

};

var breed = location.search.substring(1); // everything after the ?

if ( breed == "" ) breed = "doxie"; // or whatever default breed you want to use

var info = masterTable[ breed ];

document.getElementById("logoimage").src = "../images/" + info.image;

document.getElementById("amazon").src = "http://astore.amazon.com/" + info.iframe;

</script>

</body>

</html>

Thank you. This is a bit over my head but a great idea. I am playing with it now and will get back with some more questions. I really appreciate all the time and effort in patiently responding to me :)