Thomas’ Developer Blog

April 18, 2008

Querystrings in Javascript

Filed under: HTML, javascript — Tags: , , — sanzon @ 11:41 pm

This is the first of a two part post.  In this first part we are going to go in depth into how to use querystrings with javascript for clientside code, and in the next post we will use an actual example using a select input for a drop down list.

To begin let’s start with explaining the problem in javascript with querystrings.  In javascript there is no function that allows programers to simply draw out a value from a querystring.  So in order to solve this situation, we simply have to create a function to do so.  Seems simple?  The truth is it actually is really simple, but the examples on the web are a bit over done.

Because of how small the code actually is I’m going to past the final code now and go ahead and explain it further in depth.

var myvalue = querystring(“q”);

function querystring(myQS) {
 var querystring =;
 var groups = querystring.substring(1).split(“&”);
 var group;
 var querystringvalue = “”; 

 for (var i = 0; i < groups.length; i++) {   
  group = groups[i].split(“=”);   

  if (group[0] == myQS) {
   querystringvalue += group[1] + “,”
 return querystringvalue.substr(0,querystringvalue.length-1);


In our function we start with gathering the querystring fro, which brings back everything after the ? in the URL.  After we gather the querystring, we split it up by the ampersand.  Afterwards we go through the split and then split it again using the “=”.

Once we spit the first group we look for the first part of the group being the querystring name, in this case “q”.  Once we find the group that has the querystring name q we can extract the value in the second part of the slit.  In this example we follow it by a comma.  This is in case their is more then one querystring with the same name.  Such as

If this is the case it will return 1,2,.  Of course we use substr to extract the entire string BUT the last comma.  With that we have the extracted querystring!  As I said it was very very simple!

Now there is one more important function in javascript, but luckly it’s included in later version of javascript IE5.5+,FF 1+, and many others.  So most common browsers include it.  These functions are:

decodeURI() and encodeURI() both of these will convert nonURL friendly characters into HEX code or revert HEX code into characters.  Examples would be %20 to space and vise versa.  It’s very useful and works on most modern browsers.

Now in the next part of this post, we are going to use this example in a very nifty solution to the dropdownlist problem with not having the optgroup feature.



1 Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at

%d bloggers like this: