Updated April 15, 2023
Introduction to jquery get parameter from url
Jquery getting parameters from URL is a technique to obtaining the values present in the URL as parameters and use them in your JQuery or Javascript code. In general, we use query strings to send the required information from one page to another page. In that case, we use C#(c sharp) code to get the required data from the query string in the URL. But we cannot use that value in Jquery or Javascript code then we need to fetch the parameters using client-side code in jQuery. In this topic, we are going to learn about the jquery get parameter from url.
What are URL parameters and how to access them?
URL parameters are also known as query strings that add additional information for a given URL by including special strings to the URL known as parameters and assigning a specific value to that parameter. In this way, required information can be passed from one page to another through the URL. These parameters are added to the end of the specified URL by putting a special character ‘?’ at the end of the string. After this character parameters along with their values are added with the help of ‘=’ character which is used to assign value to the parameter. These parameters are separated using the ‘&’ character.
This is an example of how a URL looks like along with parameters.
https://www.domainname.com/url?parameter=value¶meter=value
To access a parameter and its value from the URL, the URL will be sliced into two parts wherever it finds the ‘?’ character, it considers the second part of the URL, which means the part which is after the ‘?’ character then it again breaks the URL taken into parts considering ‘&’ as the slicing character which means that it is separating all the parameters from the URL and then using a for loop each parameter is separated from its values considering ‘=’ as the slicing character and then it is stored. In this way, parameters are accessed from the URL in Jquery. Code for the above mechanism is given below.
Source Code
<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>To use the above code, you have to include a jQuery library in the head section of your code.
Step by Step Process along with code to get the parameter from the URL.
Step 1: Create a .NET project and include two web pages in it. On the first page, you will be shown two textboxes along with their labels and a button to redirect the page on clicking the button. The code for the above process is given below,
<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>This is the code given below that redirects page when the button is clicked
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);
}Step 2: Now we need to work on the next page where we need to put the Jquery code to get the data from the query string.
<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 taken two variables, name and id which get their values from the URL query string. The function GetParameterValues() splits the parameter and its values from the URL and stores it in name and id variables.
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');In the first line of the function, as described above it is looking for the ‘?’ character so that it can first slice the URL into two parts considering the second part for further process. Next, it is looking for the ‘&’ character so that it can separate every parameter.
for (var i = 0; i < url.length; i++) {
var urlparam = url[i].split('=');
if (urlparam[0] == param) {
return urlparam[1];
}
}The second part of the function works on dividing the parameter and their values considering the ‘=’ character as the separator. This function divides the string into two parts wherever it finds that character. On dividing, the two sliced strings will be obtained, one will be the parameter which will be in urlparam[0] and the other is its value which is urlparam[1]. We don’t need a parameter name but we need its value, so we will return only the second variable that is urlparam[1].
This is the way of accessing parameters and values from the URL in Jquery.
Conclusion
- URL parameters are also known as query strings that add additional information for a given URL by including special strings to the URL known as parameters
- Jquery getting parameters from URL is a technique to obtaining the values present in the URL as parameters and use them in your Jquery or Javascript code
- The process of obtaining the parameters from the URL includes slicing the URL into two as the first step then separating the different parameters and finally getting the values of the parameters and returning them.
- The above process is done with the help of three characters: ‘?’, ‘&’, ‘=’. The first character is used for the slicing of the whole URL into two. The second one is then fetched for dividing the obtained part into different parameters. The third one is used for getting the values of the parameters as the final step.
Recommended Articles
This is a guide to jquery get parameter from URL. Here we discuss What are URL parameters and how to access them. You may also have a look at the following articles to learn more –
