In my previous tutorials, I’d explained passing datatable as storedprocedure parameter in asp.net, get gridview selected row hiddenfield value using jquery, print gridview data on print button click event and other more cracking tutorials on GridView, Asp.net here.
Now here in this tutorial, I’ll explain how to get querystring value from client-side using javascript or jquery function with example code and step by step guide.
I’d already explained how to pass querystring with multiple parameters in asp.net using c# or vb.net here. Now if you want to get querystring value from client-side using JavaScript/jQuery, we need to use one JavaScript function that will get the query string url and split all the query string values that we parsed from previous page.
JavaScript Function To Get QueryString Value
var pageURL = window.location.search.substring(1);
var urlQS = pageURL.split(‘&’);
for (var i = 0; i < urlQS.length; i++) {
var paramName = urlQS[i].split(‘=’);
if (paramName[0] == key) {
//replace the special char like “+”,”&” etc from value
var value = paramName[1].replace(‘%20’, ‘ ‘).replace(‘%26’, ‘&’).replace(‘+’, ‘ ‘);
return value;
}
}
}
And you can get querystring value in specific variable, like this:
var name = getParameterValues(‘name’);
var desig = getParameterValues(‘desig’);
To test the above script example, I used the following QueryString URL:
Get QueryString Value in jQuery or JavaScript From Client-side – [.aspx]
Below is the sample code to get querystring value that I used for my .aspx page to test this example:
<head id=”Head1″ runat=”server”>
<title>Get QueryString Value in jQuery or JavaScript Example in Asp.net</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.2.js”></script>
<script type=”text/javascript”>
$(function () {
var id = getParameterValues(‘id’);
var name = getParameterValues(‘name’);
var desig = getParameterValues(‘desig’);
$(“[id$=lblId]”).text(id);
$(“[id$=lblName]”).text(name);
$(“[id$=lblDesig]”).text(desig);
});function getParameterValues(key) {
var pageURL = window.location.search.substring(1);
var urlQS = pageURL.split(‘&’);
for (var i = 0; i < urlQS.length; i++) {
var paramName = urlQS[i].split(‘=’);
if (paramName[0] == key) {
//replace the special char like “+”,”&” etc from value
var value = paramName[1].replace(‘%20’, ‘ ‘).replace(‘%26’, ‘&’).replace(‘+’, ‘ ‘);
return value;
}
}
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<h4>Page2.aspx: Get Employee Details From Previous Page QueryString</h4>
<b>Employee Id:</b>
<asp:Label ID=”lblId” runat=”server” />
<br />
<b>Employee Name:</b>
<asp:Label ID=”lblName” runat=”server” />
<br />
<b>Designation:</b>
<asp:Label ID=”lblDesig” runat=”server” />
</div>
</form>
</body>
</html>
How to pass Multiple Parameters within QueryString?
How to pass & (ampersand) within QueryString URL?
Example Result
Here is the result generated from above example:
And look at your browser address bar, your query string will looks like this:
