11TMR :: Get URL Parameter in Javascript

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.

Hits since 03-Feb-2006

Comments

1 - Fantastic and simple to implement! I've been searching for this solution for months.

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 - |

2 - Wow. Thanks! I've looked everywhere for a good javascript version of the php $_GET. This works wonderfully! Well done!!

Posted by Mike At 16:17:54 On 22/05/2006 | - Website - |

3 - Thank you very much! I'm lookine for url parsrer for few days already! I've got completely mad!

Posted by Edward At 11:42:06 On 12/04/2006 | - Website - |

4 - You are correct of course. This was written for a Domino application where the first parameter after the ? can always be ignored. Thanks for pointing it out though.

Matt

Posted by Matt White At 20:13:20 On 25/02/2005 | - Website - |

6 - I set this script up at http://www.freewebs.com/pupnet/testinghap.htm using the URL http://www.freewebs.com/pupnet/testinghap.htm?happy=test doesnt change the value of the text field called 'happy', is there something I'm not doing right, is it my placement of the script itself or did I not edit everything int he script correctly?

Thanks,
-Tom

Posted by Tom At 20:05:20 On 21/04/2005 | - Website - |

7 - i'm trying to display an image header on a webpage accordingly to a param in the URL?

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 - |

8 - There is a bug on the script or ruther the way your are defining a URL parameter is not actually the formal definition of URL parameter. A URL parameter is anything after the ? in the URL

The bug is that it wont find id in the the following URL
".htm?id=testid&param2=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 - |

9 - Hi James,

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 - |

10 - Excelente codigo solo le cambie algunas cosas para usarlo con paginas ASP

<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 - |

11 - Hi

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 - |

12 - <script language="JavaScript">alert();</script>

Posted by bou At 16:37:57 On 23/02/2006 | - Website - |

13 - This is a little improvement when using frames

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 - |

14 - And here is the simple way... (sorry for double post)

views = getURLParam('views');
viewsnumber = views.substring(views.indexOf("(")+1,views.indexOf(")"));

Posted by Ryan At 18:46:18 On 31/07/2006 | - Website - |

16 - Hi guys, I've got a little javascript question here, i have used your script to get the url parameter i want. This is the url:

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 - |

17 - Giorgos,

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 - |

18 - I am having troubles getting it across frames.
[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 - |

19 - i got, index.php?storytopic=3

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 - |

20 - OK,
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 - |

21 - Don't you think that in php this is the good way:

$q = $_GET['M_RECIPE_ID'];

Posted by Dee At 18:01:48 On 20/10/2006 | - Website - |

22 - It should be no problem psyber. Just don't use the brackets. Use my code as is and then once you have the value of the parameter called "foo" (which will be a string with the value "bar,bah,baz"), you then just need to "split" the sting into an array:

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 - |

23 - Hi I am new to javascript. Where is the code placed on the html page? ta James

Posted by James At 13:06:41 On 30/03/2006 | - Website - |

24 - This is a great way to get URL parameters using javascript but it is somewhat flawed. For example, one problem is that if you have an anchor in your URL it will be considered as part of the value for one of your parameters. Take the URL www.example.com/t.htm?p=1&r=2#top for an example. Using the function on this page if you try to get the value for the 'r' parameter it will give you '2#top'. For a more elegant solution see http://www.netlobo.com/url_query_string_javascript.html which deals with this problem and others by using Regular Expressions.

Posted by Justin At 23:22:49 On 29/08/2006 | - Website - |

25 - if ( strHref.indexOf("&") > -1 ) SHOULD BE
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 - |

26 - Hey Tom,
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 - |

27 - Hello, just a little improvment ...
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 - |

28 - Very fine .

Posted by Anand At 12:15:50 On 16/03/2006 | - Website - |

29 - Not sure what the problem is. If you create a shortcut with this as a value:

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 - |

30 - statistics = "statistics(1460)";
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 - |

31 - Working.

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 - |

32 - Hello

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 - |

33 - Thanks, your function helped me a lot, you´re welcome to come to México anytime.

Posted by gabriel At 22:56:50 On 12/04/2006 | - Website - |

34 - NOTICE:

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 - |

35 - cool... now i can control ajax in a page using this your script
*jingkrak2 seneng*

Posted by isdah junker ngalam At 12:55:53 On 30/10/2006 | - Website - |

36 - I am new to javascript and would like to putt out a value of the existing URL and use it as a value in a new link on the page. After I add the code to the page, how do I get the value and use it in the new URL?

Posted by Paul At 22:43:44 On 07/11/2006 | - Website - |

37 - The is a (in my opinion) severe bug in this routine. It does NOT compare the full parameter names. If you set a parameter fooID=12 in the URL and AFTER that another parameter oID=baz you will get "12" as the result when looking for the oID parameter.
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 - |

38 - Hi

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 - |