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

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

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

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

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.

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

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