<email ⁄>
<windows live messenger ⁄>
<myCurriculum type="pdf" ⁄>
/** * 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> <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>