It's possible to retrieve values that are specified in a URL query string using Javascript and jQuery. This can be useful for doing things like inserting dynamic content into a page, or pre-populating form fields.
For example if you had a URL with the following parameters and values:
http://www.example.com/?username=Joe%20Bloggs&company=Super%20Internet%20Company
The below will return a Javascript Object comprising the parameters specified in the URL.
// Read a page's GET URL variables and return them as an associative array. function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }
Calling getUrlVars() function would return you the following array:
{ "username" : "Joe%20Bloggs", "company" : "Super%20Internet%20Company" }
Get the values of the individual parameters using:
var userName = getUrlVars()["username"]; var companyName = getUrlVars()["company"];
You can then insert these values into your page using jQuery.
Note the use of 'decodeURI' - this will remove the %20 from the URL value and replace it with a space.
// insert value into content where there is an element with CSS class="userNameSwap" // eg. <span class="userNameSwap"></span> $('.userNameSwap').replaceWith(decodeURI(userName)); // insert value into a form field with CSS class="companyNameSwap" $("form input.companyNameSwap").val(decodeURI(companyName));
Comments
GetUrlVars not working
Hi
Im new at this and cant get this to work. Can you help by looking at my code? Im using the values in the string correctly
http://www.mysite/testing.html?asset=545454&title=testing%20page
Thanks
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<script type="text/javascript" src="http://site.co.uk/sites/Abbey/Learning at abbey/central_system/central_scripts/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var assetNo = getUrlVars()["asset"];
var title = getUrlVars()["title"];
// insert value into content where there is an element with CSS class="userNameSwap"
// eg. <span class="userNameSwap"></span>
$('.assetNoSwap').replaceWith(decodeURI(assetNo));
$('.titleSwap').replaceWith(decodeURI(title));
</script>
</head>
<body>
<div>
<span class="assetNoSwap">asset no</span>, <span class="titleSwap">title</span>
</div>
</body>
</html>
Working code
It seems that the problem with your code is that you should include your JS code within the 'Doc ready' function. I also replaced the path to the jQuery library with a Google CDN hosted version as your path included spaces which isn't a good idea.
Here is the full working code:
I am having on issue
what will happen when username or company name will already having "&" it is breaking the code for me.
'&' in the URL query string
If I understand you correctly you mean that you have a query string something like this?
If that is the case then the & in the company name, ie. Pick&Pay, needs to be replaced with it's html code equivalent which is: %26
In otherwords your query string should really look like this:
How to remove percentage sign from Query string value
Thanks for your tutorial about query string . How to remove the "%" that come in place of space.
Use 'decodeURI'
See the end of the post where I mention 'decodeURI'. This will convert the % values to their correct decoded value.
Add new comment