October 2007
Posted on the 26th at 5:40 PM CST
Get Query String Data on Client-Side with Javascript
FiledFiled under Javascript

Sometimes it can be very useful to retrieve query string values on the client-side in Javascript.  This is not all that common, but occasionally I will have a simple popup window (simple enough to be unworthy of an aspx file extension) that I need to pass a query string to it and have Javascript react to it accordingly.  If there is no server-side processing, then there is no reason to have ASP.NET serve the page.  It wouldn't be worth it just to gain access to the Request.QueryString collection.  Rather, it would be more efficient to use Javascript to retrieve the query strings.  For this purpose, I have written up a function that makes this task as simple as with ASP.NET...

function getQueryStrings() {
    var argList = new Object();

    if(window.location != null && window.location.search.length > 1) {
        var urlParms = window.location.search.substring(1);
        var argPairs = urlParms.split('&');

        for(var i = 0; i < argPairs.length; i++) {
            var pos = argPairs[i].indexOf('=')

            if(pos == -1)
                continue;
            else {
                var argName = argPairs[i].substring(0, pos);
                var argVal = argPairs[i].substring(pos + 1);

                if(argVal.indexOf('+') != -1)
                    argVal = argVal.replace(/\+/g, ' ');

                argList[argName] = unescape(argVal);
            }
        }
    }
    
    return argList;
}


The function will return an object containing each query strings name/value pair (if it finds any).  Here is an example of how to use the function, it should cover all practical uses... 

// Given that the URL is page.htm?foo=bar
window.onload = function() {
    var queryStrings = getQueryStrings();

    // These two statements are identical,
    // both will show "bar" in the alert
    alert(queryStrings.foo);
    alert(queryStrings['foo']);

    // Check if a query string exists
    if(queryStrings.foo != null) {
        document.write(queryStrings.foo);
    }

    // Loop through all query strings
    for(var prop in queryStrings) {
        alert(prop + ': ' + queryStrings[prop]);
    }
}


That's all folks!  You just might need to use it someday.  Best regards...

AnchorPermalink EyeViewed 3,296 times Del.icio.usDel.icio.us Digg ItDigg It Add a CommentAdd a Comment
Comments (9)
Permalink Comment from SeanEmail on October 29th, 2007 at 3:59 PM
Thanks for the JS function. I've actually never run into that problem you describe, but if I do, this will come in handy.

I was always surprised that JS didn't support this "out of the box", as the saying goes.
Permalink Comment from randz on November 5th, 2007 at 2:24 AM
This JS function sure will come handy. I do a lot of client-side script for the projects that I do but I have not encountered a need for this function yet. But I am sure, this function is going to be handy. Thanks for sharing.
Permalink Comment from Saurabh on November 7th, 2007 at 9:08 PM
The popup about the browser a pain man ... make it go away.
Permalink Comment from Josh StodolaEmail on November 7th, 2007 at 9:32 PM
Hello Saurabh,

Unfortunately, I am going to have to say No. You really should upgrade your browser so you can truly experience the better things on the web. You are literally missing out.

I know what you are thinking... who is this asshole telling me that I must upgrade my browser. Well, quite frankly, I am probably the same way as you are. I stick with software I am familiar with. If they release something new, I say "so what". If the new and improved version does not provide any obvious benefit, then why should I waste my time? In fact, MSN Messenger alerted me about a month or two ago telling me I have to upgrade to continue using it. I have over 100 contacts on there and guess what... I refused. I still have not upgraded to this day and I cannot sign in. The version that I had was flawless, I don't want all the new bullshit. They say I have to upgrade, I say no thanks. Now I am on Skype, with 3 contacts. I am not communicating with all my friends, but I am making a stand and following my principles. It feels good, doesn't it?

But, what you need to think about is the significance of a web browser. You spend more time in a browser than you do any other piece of software. And it is blatantly obvious that the Internet can be a dangerous place if you have weak security. You need to be up to date. I am in no way telling you to get Firefox, Opera, etc. I am an all-time IE user and I will not change, but you really need to upgrade to IE7. Nothing much has changed, it has only gotten better. Everything you are familiar with now will work almost exactly as it does. They had some issues to begin with but it is all good now.

So do yourself a favor and go upgrade. Now.

http://www.microsoft.com/windows/downloads/ie/getitnow.mspx

Best regards...
Permalink Comment from wim on November 8th, 2007 at 5:29 PM
I agree with saurabh ....

leaving that aside ... congrats on setting up this blog, its sweet ;)

make it a project on codeplex :p

Kind regards,
Wim
Permalink Comment from Josh StodolaEmail on November 8th, 2007 at 8:30 PM
Hi Wim,

Thanks! I have decided to come up with a different, less-annoying way of notifiying IE6 users. Not sure when I will get that done. The site looks much better in IE7, by the way :P

I am not going to make an open-sourced project out of my blog. I would recommend everyone to check out http://www.dotnetblogengine.net/ if they want a well-written open-source blog engine.

Thanks for stopping by!
Permalink Comment from luka on May 22nd, 2008 at 9:04 AM
beautiful, thanks Josh
Permalink Comment from Sujay Patra on June 26th, 2008 at 2:59 AM
thanks.
this code is really helpful.
Permalink Comment from SevenSnake on August 13th, 2008 at 9:25 AM
Thanks this helped alot, because I was server side but I wrote a function where I need to pass the query on the client side.
great work thanks

Guess What?

There are a few basic guidelines you should be aware of before leaving a comment…

  • If you choose to display your email address, it will not be detected by spam bots
  • Comments are limited to 3,000 characters; so far you have used none of them
  • HTML will be encoded; links and line breaks will be converted automatically
  • Comments containing five or more links will be subject to moderation
Comments feed for this post (RSS)Comments Feed
Trackback URL for this postTrackback URL

Have Your Say

← Answer this to prove you are human
 
 

Chill Out…
No Trackbacks