<Javascript Get QueryString Variable ⁄ >

/**
* Static Class
* Manage Events
*/
Events = function(){}
 
/**
* Add Event
*
* Source and full credits to:
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.AddEvent = function(obj, type, fn){
  if(!obj) return;
 
  this.RemoveEvent(obj, type, fn);
  if (obj.addEventListener) {obj.addEventListener(type, fn, false);}
  else {
    if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function(){
      obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
 
/**
* Remove Event
*
* Source and full credits to:
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.RemoveEvent = function(obj, type, fn){
  if (obj.removeEventListener) {
    try{obj.removeEventListener(type, fn, false);}catch(e){}
  }
  else{
    if (obj.detachEvent) {
      obj.detachEvent("on" + type, fn);
      obj[type + fn] = null;
      obj["e" + type + fn] = null;
    }
  }
}

/**
* Static Class
*
* A few basic DOM manipulations
* 
* @author: pedrocorreia.net
*/
 
/**
* Get Html Object reference
*
* @param String Id Object
*/
$ = function(id){return document.getElementById(id);};

/**
* 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 
  };
};

/*
* This class's responsible for all QueryString operations 
* and user interaction
*
* @author: pedrocorreia.net
*/
var QueryString = function() {
 
  var _qry = document.location.search; //our query string
  var params = new Params(); //Params collection, will hold Param objects
 
  /**
  * This function will "grab" the current query string and
  * will save it to our Params Collection
  *
  * It's a anonymous function, will be executed each time
  * we create a new QueryString instance
  */
  var _load = (function() {
    var arrQryString = _qry.split("&");
    arrQryString[0] = arrQryString[0].replace("?", ""); //remove "?"
 
    for (var i = 0, count = arrQryString.length; i < count; i++) {
      var qryPairValue = arrQryString[i].split("=");
      params.Add(new Param(qryPairValue[0], qryPairValue[1]));
    }
  })();
 
  /*
  * Get a specific Value
  *
  * @param String Key
  * @return String Value
  */
  var _getValue = function(k){return params.Get(k).Value();};
 
  /**
  * Get a specific Param
  *
  * @param String Key
  * @return Param
  */
  var _getParam = function(k){return params.Get(k);};
 
  /**
  * Get Params collection
  *
  * @return Params
  */
  var _getParams = function(){return params;};
 
  /**
  * Get number of parameters in our collection
  *
  * @return Int
  */
  var _count = function(){return params.Count();};
 
  /**
  * toString overload
  *
  * @return String
  */
  var _output = function(){return params.toString();};
 
  /**
  * Print our QueryString
  *
  * @param String Html Object
  */
  var _console = function(id){if($(id)){$(id).innerHTML = _output();}};
 
  /**
  * Autocomplete all form fields
  */
  var _autoCompleteForm = function(){
    for (var i=0, _keys=params.GetKeys(), count=_keys.length; i<count;i++){_fillFormField(_keys[i]);}
  }
 
  /**
  * Fill a field with its correspondent Param value
  *
  * @param String Query String Key
  * @param Optional String Form Field, if not specified it will be equal to Key
  */
  var _fillFormField = function(key /**, field */){
    var field=$(arguments[1] || key);
    if(field) {field.value = _getValue(key);}
  }
 
  /**
  * Create DropdownList
  *
  * @param String DropdownList
  * @param String Label
  * @param String Label
  */
  var _fillDropDownList = function(ddl, k, v){
    var ddList=$(ddl);
    if(ddList){
      var _keys=params.GetKeys();
 
      ddList.options.add(_createDDListOption("","(pick a key)"));
      for (var i=0, count=_keys.length; i<count;i++){
        ddList.options.add(_createDDListOption(_keys[i],"Key: "+_keys[i]));
      }
 
      //add event onchange to our DropDownList
      Events.AddEvent(ddList,"change",function(){
          var key="", value="";
          if (this.value){
            key=this.value;
            value=_getValue(this.value);
          }
          else {
            key="";
            value="";
          }
 
          if($(k)){$(k).innerHTML=key;}
          if($(v)){$(v).innerHTML=value;}
        }
      );
    }
  };
 
  /**
  * Create a DropDownList Option
  *
  * @param String Value
  * @param String Text
  */  
  var _createDDListOption = function(value, text){
    var ddlOption = document.createElement("option");
    ddlOption.value = value;
    ddlOption.text = text;
    return ddlOption;
  };
 
  return {
    GetValue: _getValue,
    GetParam: _getParam,
    GetParams: _getParams,
    Count: _count,
    AutocompleteForm: _autoCompleteForm,
    FillField: _fillFormField,
    FillDropDownList: _fillDropDownList,
    ToString: _output,
    Verbose: _console
  };
};
 

/**
* Init function
*
* @author pedrocorreia.net
*/
Init = function() {
  var q = new QueryString();
 
  //print the query string
  q.Verbose("console");
 
  //fill dropdown list with query string keys
  q.FillDropDownList("ddListKeys","lbl_key","lbl_value");
 
  //check if we submitted the form
  if(q.Count()>0){
 
    //fill our field "name"
    var FillTxtName = (function(field) {
      var param = q.GetParam(field);
      $(field).value = param.Value();
    }) ("name");
 
    //fill our field "soccer_team"
    q.FillField("soccer_team");
 
    //or we can simply use
    q.AutocompleteForm();
  }
}
 
Events.AddEvent(window,"load",Init);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
  <title>Http Get Query String Variables</title>
 
  <script type="text/javascript" src="Events.js"></script>
  <script type="text/javascript" src="Dom.js"></script>
  <script type="text/javascript" src="QueryStringParameters.js"></script>
  <script type="text/javascript" src="QueryString.js"></script>
  <script type="text/javascript" src="Init.js"></script>
 
</head>
<body>
  <span id="console"></span>
  <br />
  <label for="ddListKeys">QueryString Keys</label> <select id="ddListKeys"></select>&nbsp;
  <span id="lbl_key"></span> <span id="lbl_value"></span>
 
  <br /><br /><br />
  <form method="get" id="my_form" action="">
    <label for="name">Name</label> <input type="text" name="name" id="name" />
    <label for="age">Soccer Team</label> <input type="text" name="soccer_team" id="soccer_team" />
    <input type="submit" value="Test Javascript Http Get Var" />
  </form>
</body>
</html>