How to retrieve query string parameter and values using javascript (Jquery)?

Question

Click me

$('.clickme').click(function(event) {
event.preventDefault();
var stringId = $(this).attr("id");
 var mId = stringId.substring(2)
....

I can retrieve the value of id using ID of anchor element. I think I should be able to get it directly from href. So how do I retrieve value of id and status from HREF (url query string)?

I am using Jquery.

Thank you for your help.

UPDATE: Also how do I can get all of the URL value .. i.e. "test.php?id=100&blah=blah"?

• Josh Stodola: You need to substring it. If you need an example, leave a comment.

Answer 1

This code:

function querySt(ji) {
 hu = $(".clickme").attr("href");
 gy = hu.split("&");
 for (i=0;i<gy.length;i++) {
 ft = gy[i].split("=");
 if (ft[0] == ji) {
 return ft[1];
 }
 }
}

To use it:

document.write(querySt("id"));
document.write(querySt("status"));

Answer to your 'update':

http://ilovethecode.com/Javascript/Javascript-Tutorials-How_To-Easy/Get_Query_String_Using_Javascript.shtml

• TigerTiger: Ok .. so i have to find it through a for loop? I was thinking I could access it directly .. something like attr("status")!!!
• user142019: Now you can, just do querySt("status"); I don't think jQuery has got a build in function for URI parsing.
• tvanfosson: This will work for everything but the id. The key for that using this code would be "test.php?id" not "id". You need to first remove everything before the "?" then split on ampersands.
• Ateş Göral: How about throwing in some decodeURIComponent calls in there?

Answer 2

var stringId = $(this).attr("id"); // this will return p_100
var stringId = $(this).attr("id").split('_')[1]; // this will return 100
var attr= $(this).attr("href"); // this will return all href attribute value

UPDATE

//href="test.php?id=100&status=pending&time=2009"
var attrFromAnchor= $(this).attr("href").split('?')[1].split('&')[0].split('=')[1]; // returns 100

• TigerTiger: thanks for your answer .. i can get value from ID of element (already done).. but I need to get it from URL of Anchor.

Answer 3

There are a lot of good solutions here but I figured I'd post my own. Here's a quick little function I threw together which will parse a query string in the format from either window.location.search or from a provided search string value;

It returns a hash of id value pairs so you could reference it in the form of:

var values = getQueryParams();
values['id']
values['blah']

Here's the code:

/*
 This function assumes that the query string provided will
 contain a ? character before the query string itself.
 It will not work if the ? is not present.
 In addition, sites which don't use ? to delimit the start of the query string
 (ie. Google) won't work properly with this script.
 */
function getQueryParams( val ) {
 //Use the window.location.search if we don't have a val.
 var query = val || window.location.search;
 query = query.split('?')[1]
 var pairs = query.split('&');
 var retval = {};
 var check = [];
 for( var i = 0; i < pairs.length; i++ ) {
 check = pairs[i].split('=');
 retval[decodeURIComponent(check[0])] = decodeURIComponent(check[1]);
 }
 return retval;
}

To get the value of the query string from the URL without string parsing you can do:

window.location.search.substr(1)

If you want the name of the page before the ? you still need to do a little string parsing:

var path = window.location.pathname.replace(/^.*\/(.*)$/,'1ドル');
var query = path + window.location.search;
//If your URL is http://www.myserver.com/some/long/path/big_long%20file.php?some=file&equals=me
//you will get: big_long%20file.php?some=file&equals=me

Hope this helps! Cheers.

• Ateş Göral: This implementation doesn't take into account URL-encoded names and values.
• coderjoe: @Ates Goral you're absolutely correct. It does not take that case into account. I've updated my solution as per your suggestion.
• Brian Hogg: Also should add a condition if there is no query string present after the initialization, ie. if (!query) return []; before the query.split('?')[1] line

Answer 4

Here's a concise (yet complete) implementation for getting ALL name/value pairs from a query string:

function getQueryParams(qs) {
 qs = qs.split("+").join(" ");
 var params = {};
 var tokens;
 while (tokens = /[?&]?([^=]+)=([^&]*)/g.exec(qs)) {
 params[decodeURIComponent(tokens[1])]
 = decodeURIComponent(tokens[2]);
 }
 return params;
}
//var query = getQueryParams(document.location.search);
//alert(query.foo);

• Dingle: The one-line regexp does not work with safari and IE (infinite loop). The fix is to have a separate line for "var pattern = /[?&]?([^=]+)=([^&]*)/g;", then use "pattern.exec(qs)". BTW, what's the "qs.split('+')" for? If the url is encoded, there should be no plus sign.

Answer 5

No need for jQuery, this solution works on all browsers:

function querySt(ji)
{
 hu = window.location.search.substring(1);
 gy = hu.split("&");
 for (i=0;i<gy.length;i++) {
 ft = gy[i].split("=");
 if (ft[0] == ji) {
 return ft[1];
 }
 }
 return "";
}

Answer 6

Answers here are outdated now.

See this solution using Vanilla JavaScript (ES5)

var qd = {}; // qd stands for query dict
document.getElementById("p_100")[0].href.split("?")[1].split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v,]})

I like to pretend it's oneliner, but I was told it's not. hmm...Who would split chained function calls on new lines anyways, right?

example:

"test.php?id=100&status=pending&time=2009"
> qd
id: ["100"]
status: ["pending"]
time: ["2009"]
// values can also be obtained like this
> qd.id[0] // "100"
> qd["id"][0] // "100"

*It returns arrays, because it is optimized for multi-valued keys. Look here for dummy solutions (without arrays).

note: To teach old browsers the new .forEach you can inject this polyfill from Mozilla (MDN).