Post
Ask Question

Get Values From Query String Using jQuery

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.
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         Name: <asp:TextBox runat="server" ID="txtName"></asp:TextBox>  
  5.         <br />  
  6.         ID: <asp:TextBox runat="server" ID="txtID"></asp:TextBox>  
  7.         <br />  
  8.         <br />  
  9.         <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" />  
  10.     </div>  
  11.     </form>  
  12. </body> 
Now I will work on the click of this button.
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.   
  4. }  
  5.   
  6. protected void btnSubmit_Click(object sender, EventArgs e)  
  7. {  
  8.     Response.Redirect("WebForm2.aspx?Name="+txtName.Text+"&ID="+txtID.Text);  
  9. }
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:
  1. <script>  
  2.     $(document).ready(function () {  
  3.         var name = GetParameterValues('Name');  
  4.         var id = GetParameterValues('ID');  
  5.         alert("Hello " + name + " your ID is " + id);  
  6.         function GetParameterValues(param) {  
  7.             var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
  8.             for (var i = 0; i < url.length; i++) {  
  9.                 var urlparam = url[i].split('=');  
  10.                 if (urlparam[0] == param) {  
  11.                     return urlparam[1];  
  12.                 }  
  13.             }  
  14.         }  
  15.     });  
  16. </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.
  1. 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.
  1. for (var i = 0; i < url.length; i++) {  
  2.     var urlparam = url[i].split('=');  
  3.     if (urlparam[0] == param) {  
  4.         return urlparam[1];  
  5.     }  
  6. }
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.
 
jQueryQueryString
 
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.
 
jQueryQueryString


Similar Articles