How To Get Query String Value In Jquery

by

Query strings are a useful way to pass data between pages, allowing you to include additional information in the URL. These strings consist of key-value pairs and can be accessed using JavaScript or jQuery. In this blog post, we’ll show you how to get query string values using jQuery.

Step 1: Write a Function to Parse Query Strings

To get query string values in jQuery, you’ll need to write a function that can parse the URL and extract the desired parameters. Let’s create a function called getQueryStringValue that takes the parameter name as an argument and returns its value.

This function will use the window.location.search property to get the query string, and then use a regular expression to match the desired parameter. 


function getQueryStringValue(paramName) {
    var queryString = window.location.search;
    var regex = new RegExp('[?&]' + paramName + '=([^&#]*)');
    var results = regex.exec(queryString);
    return results === null ? '' : decodeURIComponent(results[1]);
}

Step 2: Use the Function with jQuery

Now that you have the getQueryStringValue function, you can use it in conjunction with jQuery to get the value of a specific query string parameter. For example, let’s say you want to get the value of a parameter called email: 


$(document).ready(function() {
    var email = getQueryStringValue('email');
    console.log('Email:', email);
});

This code snippet will run when the document is ready and use the getQueryStringValue function to fetch the value of the email parameter from the URL. It will then log the result to the console.

Step 3: Handling Multiple Parameters

In case you need to handle multiple query string parameters, simply call the getQueryStringValue function for each parameter you want to retrieve. For example, let’s say you want to get the values of parameters called email and username: 


$(document).ready(function() {
    var email = getQueryStringValue('email');
    var username = getQueryStringValue('username');
    console.log('Email:', email, 'Username:', username);
});

This code snippet will fetch the values of both the email and username parameters and log them to the console.

Conclusion

In this blog post, we showed you how to get query string values in jQuery by writing a custom function and using it alongside jQuery. This method is effective for handling single or multiple query string parameters and can be easily integrated into your projects. Happy coding!