Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question 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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    algross (09-20-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    algross (09-18-2012)

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Your reply..

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

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,458
    Thanks
    76
    Thanked 4,373 Times in 4,338 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    algross (09-20-2012)

  • #9
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

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