Get URL Parameter in Javascript
Category Tips Tricks Samples
Bookmark :
Just a useful little javascript function which will get a URL parameter and return it to you. For example if the current URL is "...?opendocument&id=testid" then calling getURLParam("id") will return "testid".
Update (31st December 2006)
This posting has been around for a long time now and gets a lot of traffic. Although it will still work fine as long as you know its limitations, several people have pointed to this article as being a better solution. I totally agree, it's well worth a look.
Update (27th February 2007)
A couple of bug fixes raised via email. Thanks to Oliver Bryant for those.
Bookmark :
Just a useful little javascript function which will get a URL parameter and return it to you. For example if the current URL is "...?opendocument&id=testid" then calling getURLParam("id") will return "testid".
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (
aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return unescape(strReturn);
}
Update (31st December 2006)
This posting has been around for a long time now and gets a lot of traffic. Although it will still work fine as long as you know its limitations, several people have pointed to this article as being a better solution. I totally agree, it's well worth a look.
Update (27th February 2007)
A couple of bug fixes raised via email. Thanks to Oliver Bryant for those.









Comments
I'm Perl efficient and Javascript challenged. Unfortunate for me, the site owner requested a complex javascript menu. In order to store the javascript menu source outside the html file, I needed to pull a value from the URL params before loading the javascript menu arrays.
The address I entered above is the active site for Quantity Postcards. The URL where the new site is being tested is http://www.qpfans.com/catalog/psdbi/intro.html?TEMP_PARAM1=retail
Thank you, Matt, for using the Internet to share your knowledge. I will include your name and a site link.
Ashford
Posted by Ashford At 08:18:08 On 28/11/2005 | - Website - |
Posted by Mike At 16:17:54 On 22/05/2006 | - Website - |
Posted by Edward At 11:42:06 On 12/04/2006 | - Website - |
Matt
Posted by Matt White At 20:13:20 On 25/02/2005 | - Website - |
Thanks,
-Tom
Posted by Tom At 20:05:20 On 21/04/2005 | - Website - |
I'm trying to figure it out, but... can anyone help me with this?
Thank you... :)
Posted by Red At 23:24:07 On 24/08/2006 | - Website - |
The bug is that it wont find id in the the following URL
".htm?id=testid¶m2=foo"
small modification to your code Matt:
just changed the first two occurences of & to ?
---------------------------------------------------------------------------
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}
Posted by Giorgos Kontopoulos At 18:52:46 On 17/11/2005 | - Website - |
You can place Javascript anywhere in the HTML as long as it is surrounded with:
<script language="javascript">
//Your script goes here
</script>
Thant being said normally JS will be placed in the HTML header or in a seperate file which would be referenced using:
<script language="javascript" src="myscript.js"></script>
Hope this helps.
Matt
Posted by Matt White At 18:01:03 On 30/03/2006 | - Website - |
<script language="JavaScript" type="text/javascript">
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].indexOf("=") > -1 )
{
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}
</script>
Gracias MATT
Posted by Romeo Larios At 18:17:03 On 13/08/2006 | - Website - |
Nice work and i have saved the same thing as seperate java script file and i am calling that script through right click IE menu , It's not working there why? ie. It's not returning the URL ?
Posted by Sudhakar J At 14:46:17 On 14/04/2005 | - Website - |
Posted by bou At 16:37:57 On 23/02/2006 | - Website - |
function GetURLParam(strParamName,FrameNaam)
{ var strReturn = "";
var strHref = parent.frames[FrameNaam].location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if ( aQueryString[iParam].indexOf(strParamName + "=") > -1 )
{ var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}
Posted by MadRef At 13:01:12 On 06/06/2006 | - Website - |
views = getURLParam('views');
viewsnumber = views.substring(views.indexOf("(")+1,views.indexOf(")"));
Posted by Ryan At 18:46:18 On 31/07/2006 | - Website - |
blababla/en/index.php?frames=&views=statistics(1460)&functions=&elementId=712&action=browse
so i get the views in return as a value: statistics(1460)
but then, how can i get only the number out of it? so as a result tot get 1460 instead of statistics(1460) ??
Thanks for your time :)
Posted by Caner At 10:22:06 On 26/07/2006 | - Website - |
As mentioned in the first two comments this function was written for a Lotus Domino application where the first parameter after the ? can always be ignored (it is an internal server parameter). However, it seems that most people coming here these days are not Domino heads so I have updated the function to reflect a more generic requirement.
Matt
Posted by Matt White At 15:26:06 On 19/11/2005 | - Website - |
[frame 1]
[frame 2]
how can i read the url from frame 1 in frame 2?
Posted by MadRef At 14:01:09 On 23/05/2006 | - Website - |
want to show a diff images in same place for
if storytopic=1, 2 or 3....
Posted by Red At 23:37:38 On 24/08/2006 | - Website - |
nice code by the way I'm working with something very similar, I'm not a javascript kind of person so go easy :)
I'm trying to do the same thing but passing an array in the params. i.e.
blah.cgi?foo=bar&foo=bah&foo=baz&feh=bam
So I end up with foo=(bar,bah,baz)&feh=(bam)
can anyone point me in the right direction?
Posted by psyber At 05:32:09 On 22/07/2005 | - Website - |
$q = $_GET['M_RECIPE_ID'];
Posted by Dee At 18:01:48 On 20/10/2006 | - Website - |
var strValue = getURLParam("foo");
var myArray = strValue.split(",");
Hope this helps
Matt
Posted by Matt White At 16:41:02 On 23/07/2005 | - Website - |
Posted by James At 13:06:41 On 30/03/2006 | - Website - |
Posted by Justin At 23:22:49 On 29/08/2006 | - Website - |
if ( strHref.indexOf("?") > -1 )
strHref.substr(strHref.indexOf("&")) OF THE FOLLOWING LINE SHOULD BE
strHref.substr(strHref.indexOf("?"))
SO the param string will start searching for params and valus with the first parameter always following a ? character and split subsequent pairs with the & character.
Thank you for this code, it is the best javascript solution I have found yet.
Posted by Tom At 16:45:29 On 25/02/2005 | - Website - |
I was getting syntax errors when I called the function from a form:
onLoad="document.myForm.myfield.value = getURLParam('id')"
The breakthrough was that I used single quotes instead of double quotes in the parameter I was passing, because of the external double quotes.
Posted by Erick At 17:00:24 On 13/05/2005 | - Website - |
You should also use lowercase for the parameter of your function ...
line -> if (aQueryString[iParam].indexOf(strParamName.toLowerCase()+ "=") > -1 ) .. or a call to getUrlParam('Foo') won't work in a url ...?Foo=bar....
Posted by andr At 03:40:37 On 23/05/2006 | - Website - |
Posted by Anand At 12:15:50 On 16/03/2006 | - Website - |
javascript:alert(document.location.href)
It seems to work fine (i.e. you get a prompt with the current URL in it) so it should just be a matter of changing to code to do what you want from there.
Posted by Matt White At 16:36:37 On 14/04/2005 | - Website - |
stat2 = statistics.split("statistics(");
statistics = stat2.join("");
stat2 = statistics.split(")");
statistics = stat2.join("");
alert(statistics);
I know there's probably a much better and simpler was to do this (which i don't know yet), but this should work...
Posted by Ryan At 18:34:09 On 31/07/2006 | - Website - |
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString =
strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (
aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}
var topic = getURLParam("storytopic");
switch(topic)
{
case "1":
document.writeln('<img src="image1.jpg">');
break;
case "2":
document.writeln('<img src="image2.jpg">');
break;
case "3":
document.writeln('<img src="image3.jpg">');
break;
default:
document.writeln('<img src="default.jpg">');
break;
}
Posted by Red At 16:59:17 On 26/08/2006 | - Website - |
What happens if the parameter from the URL is a file
posted by an HTML form ?
Regards
Ignasi
Posted by Ignasi Cemeli At 14:31:46 On 20/10/2006 | - Website - |
Posted by gabriel At 22:56:50 On 12/04/2006 | - Website - |
The variable name should be lower cases. I had a variable link.asp?SomethiNG=1234 and with
getURLParam('SomethiNG'); // DOES NOT WORK
getURLParam('something'); // WORKS
Hope it helps
Posted by Jack rabbit At 10:31:06 On 09/02/2006 | - Website - |
*jingkrak2 seneng*
Posted by isdah junker ngalam At 12:55:53 On 30/10/2006 | - Website - |
Posted by Paul At 22:43:44 On 07/11/2006 | - Website - |
You should (in my opinion) compare the entire parameter name, "indexof" is NOT enough.
Just a few lines of code to show a possible solution to this problem:
...
if ( strHref.indexOf("?") > -1 ){
// remove the question mark!
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
var cmpstring = strParamName + "=";
var cmplen = cmpstring.length;
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
// Keep the difference between:
// fooID=...
// oID=...
// if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
if (aQueryString[iParam].substr(0, cmplen) == cmpstring ){
var aParam = aQueryString[iParam].split("=");
...
Posted by Hinnerk Rümenapf At 15:24:53 On 21/12/2006 | - Website - |
Regular expressions is the best tool for this problem pattern. IMHO the best solution is the one at at http://www.netlobo.com/url_query_string_javascript.html (mentioned earlier)
Posted by rich At 15:08:04 On 27/12/2006 | - Website - |
Nice work around for cross domain ifram calls...
Posted by Lokesh At 05:51:58 On 06/11/2007 | - Website - |
Posted by null At 07:57:45 On 03/01/2008 | - Website - |
Really simple light and useful, u spare me much time.
cheers
Posted by difexto At 15:55:10 On 11/01/2008 | - Website - |
Posted by Arthur Lucena At 14:55:29 On 14/05/2008 | - Website - |
var _GET={};
for(var m, v=location.href.split(/[\?\&]/), k=v.length-1;k>0;k--)
_GET[(m=v[k].split(/[\=]/))[0]] = m.length>1?decodeURI(m[1]):"";
Now you can access the url variables this way:
alert(_GET.variablename)
Posted by null At 15:51:51 On 07/11/2008 | - Website - |
for(var m, v=location.href.split(/[?&]/), k=v.length-1;k>0;k--)
_GET[(m=v[k].split(/[=#]/))[0]] = m.length>1?decodeURI(m[1]):"";
Tuned it a bit so it wont mess up with a terminating #
Posted by Rik Arends At 15:58:07 On 07/11/2008 | - Website - |
var _GET={};
for(var m, v=location.href.split(/[?&]/), k=v.length-1;k>0;k--)
_GET[(m=v[k].split(/[=#]/))[0].toLowerCase()] = m.length>1?decodeURI(m[1]):"";
Posted by null At 16:02:21 On 07/11/2008 | - Website - |
It autodetects if it needs to create an object or an array, depending on the type of the index. String creates an object, number creates an array.
Due to a special case in the code [-1] is treated as []. Besides, negative array indices are evil.
examples:
http : //ur/page?val[]=1&val[]=2&val[]=3;
Will be accessible as an array:
_GET.val[0] to _GET.val[2]
http : //ur/page?val[v1]=1&val.v2=2;
Will be accessible as an object:
_GET.val.v1 and _GET.val.v2
The code supports n-levels.
http : //ur/page?val[v1][0]=1;
Which will be stored as an array in
_GET.val.v1[0]
You can put quotes around names to force 'object' as type
http : //ur/page?val[v1]['1']=1;
Which will be stored properly stripped as an object:
_GET.val.v1['1']
The code is below, formatting is a bit off on this post, make it nicer if that makes you feel better :)
var _GET = {};
for(var i,a,m,n,o,v,p=location.href.split(/[?&]/),l=p.length,k=1;k<l;k++)if( (m=p[k].match(/(.*?)(\..*?|\[.*?\])?=([^#]*)/))&&m.length==4){
n=decodeURI(m[1]).toLowerCase(),o=_GET,v=decodeURI(m[3]);
if(m[2])for(a=decodeURI(m[2]).replace(/\[\s*\]/g,"[-1]").split(/[\.\[\]]/),i=0;i<a.length;i++)
o=o[n]?o[n]:o[n]=(parseInt(a)==a)?[]:{}, n=a.replace(/^["\'](.*)["\']$/,"$1");
n!='-1'?o[n]=v:o[o.length]=v;
}
Posted by Rik Arends At 17:59:54 On 07/11/2008 | - Website - |
Alright, i added support for [] style PHP arrays and objects.
It autodetects if it needs to create an object or an array, depending on the type of the index. String creates an object, number creates an array.
Due to a special case in the code [-1] is treated as []. Besides, negative array indices are evil.
examples:
http : //ur/page?val[]=1&val[]=2&val[]=3;
Will be accessible as an array:
_GET.val[0] to _GET.val[2]
http : //ur/page?val[v1]=1&val.v2=2;
Will be accessible as an object:
_GET.val.v1 and _GET.val.v2
The code supports n-levels.
http : //ur/page?val[v1][0]=1;
Which will be stored as an array in
_GET.val.v1[0]
You can put quotes around names to force 'object' as type
http : //ur/page?val[v1]['1']=1;
Which will be stored properly stripped as an object:
_GET.val.v1['1']
The code is below, formatting is a bit off on this post, make it nicer if that makes you feel better :)
var _GET = {};
for(var i,a,m,n,o,v,p=location.href.split(/[?&]/),l=p.length,k=1;k<l;k++)
if( (m=p[k].match(/(.*?)(\..*?|\[.*?\])?=([^#]*)/))&&m.length==4){
n=decodeURI(m[1]).toLowerCase(),o=_GET,v=decodeURI(m[3]);
if(m[2])for(a=decodeURI(m[2]).replace(/\[\s*\]/g,"[-1]").split(/[\.\[\]]/),i=0;i<a.length;i++)
o=o[n]?o[n]:o[n]=(parseInt(a)==a)?[]:{}, n=a.replace(/^["\'](.*)["\']$/,"$1");
n!='-1'?o[n]=v:o[o.length]=v;
}
Posted by Rik Arends At 18:14:38 On 07/11/2008 | - Website - |
Posted by Kaliraja At 05:54:19 On 28/11/2008 | - Website - |
thank you!{ Link }
Posted by caro At 04:17:34 On 04/01/2009 | - Website - |