<Javascript Get QueryString Variable ⁄ >

Probably this won't be a normal procedure, getting query string variables using a client-script, JavaScript, mainly you use a server-side script, such as PHP, ASP.NET.

But you can, also, easily get variables in GET request (this is, all variables in the url), for example when submitting a form using method="get", as far as I know JavaScript can't handle http post requests.

It's a simple process, you just to look into "document.location.search" and analyze the string content, for example, we know that the 1st variable will be after "?" and consequent (if exists) will be after "&", so we just need to use String.split function.

Basically our query string's just a pair value: Key=>Value, just like an associative array.
In this snippet I created 2 objects: Param and Params; as you can easily guess, Params will be a collection of Param Objects, it all hold all query string content (key=>value).

This is an extensible script, I created a few functions, just like getting a specific key and its value, auto fill a form, fill a specific form field, etc, etc.

Hope this helps you in any manner, I already used it a few projects where server-side scripting wasn't available, but perhaps that won't occur that much.

Here goes the code.

Events.js, this file's responsible for events management, that is, our page has elements and those elements will react to events/ triggers, with this class we'll be able to add or remove events, such as onchange, onload, etc, etc.

QueryStringParameters.js, as I said earlier, we'll have two objects: Param and Params; Param Object will have two properties: key and value; Params Object will act like a container, will save all Param Objects and will allow us to get a specific Param information.

/**

* QueryString Parameters container

*

* @author: pedrocorreia.net

*/

/**

* QueryString Parameter

*

* @param String Key

* @param String Value

**/

var Param = function(k, v){

var self = this;

/**

* Will hold each parameter in our query string

* QueryString Pair - Key=>Value

*

* @param String Key

* @param String Value

* @return Object

**/

var _pair = (function(){

self.key = k;

self.value = decodeURI(v);

return self;

})(k, v);

/**

* Get QueryString Key

*

* @return String

**/

var _key = function(){return _pair.key;};

/**

* Get QueryString Value

*

* @return String

**/

var _value = function(){return(_pair.value || "");};

/**

* toString overload

*

* @return String

*/

var _output = function(){

return(_pair.key)?"Key: "+_pair.key+"; Value: "+_pair.value+";":"";

};

return{

Key: _key,

Value: _value,

toString: _output

};

};

/**

* This object will hold all our Param objects.

*

* We'll use an associative array, this is, our array index will be

* our query string variable (key), so if you specify the same key

* twice, or more, the last specified will override the current.

*

*/

var Params = function(){

var _ps = {}; //our container, will hold "Param" objects

/**

* Add Parameter

*

* @param Param QueryString Parameter

*/

var _addParam = function(param){ _ps[param.Key()] = param;};

/**

* Get Parameter

*

* @return Param

*/

var _getParam = function(k){return(_ps[k] || "");};

/**

* Get all query string Keys

*

* @param Array

*/

var _getKeys = function(){

var _keys=[]

for(var p in _ps){if(p){_keys[_keys.length] = p;}}

return _keys;

}

/**

* Get the size of our Params collection

*

* @return Int

*/

var _numElements = function(){

var count = 0;

for(var p in _ps){if(p){count++;}}

return count;

};

/**

* toString overload

*/

var _output = function(){

if(_numElements() === 0){return"";}//nothing to output

var str = "";

for(var p in _ps){ str += _ps[p].toString() + "<br/>"; }

return str;

};

return{

Add: _addParam,

Count: _numElements,

Get: _getParam,

GetKeys: _getKeys,

toString: _output

};

};

QueryString.js, this is our main object, basically what we'll use more often;