Get Values From Query String Using jQuery

Anubhav Chaudhary

6y542k13100Article

jQuery Query StringGet Parameters Value using jQueryQuery String in jQuery

13 Comments

Join the conversation! Your thoughts help the community grow.

Bhavesh Jadav8y ago
It's helpfull thanks.
Manav Pandya9y ago
How to get query string using jquery
Manav Pandya9y ago
Thanks for sharing
kalu singh rao10y ago
Nice...
Ajeet Mishra11y ago
good one
mukesh kumar11y ago
Great article Anubhav! Can you explain me if i wish redirecting url also using Javascript on another page with some parameters in query String and on page 2 i need to access those parameter . in my case no postback needed of page1.
mukesh kumar11y ago
it doesnt work when i use for window.location.href = '/WebForm2.aspx?Name=' + name + '&ID=' + id; for rediecting. please explain
Anubhav Chaudhary11y ago
Thanks @Vivek Tripathi
Vivek Tripathi11y ago
Nice Anubhav
Anubhav Chaudhary12y ago
Thanks Manoj :)
manoj sati12y ago
Nice Example
Anubhav Chaudhary12y ago
Thanks Rajeev
Rajeev Ranjan12y ago
great article.

Introduction

This article explains how to get values from a query string using jQuery.

We often use a query string to send some type of information from one page to another page, but in most cases, we use C# code to fetch the data from the query string in the URL, but what to do if you need to use the data in your JavaScript/jQuery code? Then you need to fetch it using client-side code, in those cases, this article will definitely help you.

Step 1

First of all I have created a .NET project with two webpages added. On the first page I'll simply add two textboxes and one button that will be used to open the next page or second page.

<body>
<form id="form1" runat="server">
<div>
Name: <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
<br />
ID: <asp:TextBox runat="server" ID="txtID"></asp:TextBox>
<br />
<br />
<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" />
</div>
</form>
</body>

Now I will work on the click of this button.

protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
Response.Redirect("WebForm2.aspx?Name="+txtName.Text+"&ID="+txtID.Text);
}

From here I have provided the path of the second Webpage along with the data provided in two textboxes.

Step 2

Now I will work on the second page where the jQuery code is needed to be applied to get the data using a query string.

First of all add a jQuery library to the head section of your application. Then add this code to the script section:

<script>
$(document).ready(function () {
var name = GetParameterValues('Name');
var id = GetParameterValues('ID');
alert("Hello " + name + " your ID is " + id);
function GetParameterValues(param) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}
}
});
</script>

Here I have created two variables named "name" and "id". A function is created named "GetParameterValues()", this function will work for both the variables one by one and will return the values fetched from the URL.

In this function, the first line is looking for the question mark (?) because it will slice the URL from there. After slicing the URL it will split the URL values using the "&" mark, in other words, It'll split wherever it finds the "&" mark.

var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

Now a for loop is applied on the sliced part of the URL that will work until all the parameters are not fetched.

Again in this loop we are spliting the values using the "=" mark, in other words it will split the values from where ever it will find the "equal to" mark. On spliting it will always get two values, the first one is the parameter and the second one is it's value. We need to get the values of these parameters, that's why I am returning the urlparam[1] because [0] is getting the parameter name.

for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}

Now we can debug our application.

Output

On running the application we first see the first webform on which two textboxes are available. Provide the values in these textboxes and click on the Button.

Now it will redirect to the second webpage and in the URL you can see the values provided in the Textboxes.

On coming to the second page an alert box is being displayed with the values of the texboxes.