If you want to get query string value from URL using javaScript, you have found the right tutorials. Here, you will get the best script within a custom function. This function will be worked with different types of the query string. You will also get a complete guide to use it directly in your project.
You will need it whenever you work with dynamic content using ajax. It will help you to get dynamic query string value from the URL So that you can easily access dynamic content from the database using back-end language.
In this tutorial, I will show you a basic example by getting the query string value. Once you will learn it, you will quickly get other different types of query string URL
As you see in the above image, there are four URLs and one HTML button is created to get the query string value. You will learn it from the next steps. This is only a basic example, After learning it, you can quickly get the value of other types of the query string.
Contents
How to Get Query String From URL Using JavaScript
Before getting started coding, you should know about the query string –
The query string is the part of an URL. It assigns a value to a parameter and joins to a web page URL with a question mark ?.
More than two query strings are always declared with an ampersand &. Keep remembering that query string value must not be assigned within a quotation.
Syntax –
For One Query String – page-url.ext?parameter=value
For Two Query String – page-url.ext?parameter1=value1¶meter2=value2
Example –
For One Query String – index.php?id=1
For Two Query String – index.php?id=2&name=coding
In the above example, I have shown you one & two query strings. Now You can declare more query strings according to your project requirement.
Learn More –
Convert HTML to PDF in JavaScript
Export HTML Table to Excel using JavaScript
Now, Configure the following steps. These steps will help you quickly to get the query string from the URL.
1. Create Query String URL Using HTML
Configure the following points –
- Write the HTML code to create a link with a query string URL.
- Create an HTML button to get query string value on click.
- Create a section to display the query string value.
File Name – index.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="query-string">
<a href="index.php?id=1&language=html">First Query String URL </a>
<a href="index.php?id=2&language=css"> Second Query String URL </a>
<a href="index.php?id=3&language=javascript"> Third Query String URL </a>
<a href="index.php?id=4&language=php">Fourth Query String URL </a>
<button id="getValue">
Get Query String Value
</button>
<br><br>
<div id="result"></div>
</div>
<script type="text/javascript" src="custom.js"></script>
</body>
</html>
3. Get Query String Value Using JavaScript Function
Also, Configure the following points –
Js Code -1
- Create a custom javaScript function with arguments
parameterand assign it to a variablegetQueryStringValue. - Get the current page URL and assign to a variable
currentPageURL - Get all the query string and assign to a variable
queryString - Declare a for loop with
queryString - Get parameter from URL & assign to a variable
getParameter - If
getParameter[0] === parameter, then return the query string value.
Js Code – 2
- Apply click event on a button
id="getValue" - Pass query string
idparameter to functiongetQueryStringValue()and assign it to a variableid. - Pass query string
languageparameter to functiongetQueryStringValue()and assign it to a variablelanguage. - Display id value & language value in section
id="result"
File Name – custom.js
document.getElementById('getValue').onclick=function(){
var id = getQueryStringValue('id');
var language = getQueryStringValue('language');
document.getElementById("result").innerHTML = "<b>Id : </b>"+id+"<br>"+" <b>language: </b>"+language;
};
var getQueryStringValue = function(parameter) {
var currentPageURL = window.location.search.substring(1);
var queryString = currentPageURL.split('&');
var getParameter;
var i;
for (i = 0; i < queryString.length; i++) {
getParameter = queryString[i].split('=');
if (getParameter[0] === parameter) {
return getParameter[1] === undefined ? true : decodeURIComponent(getParameter[1]);
}
}
};
My Suggestion –
Dear Developers, I hope you have got the above coding concepts. Now you can easily implement the above functionality in your project. If you have any questions related to javaScript, you can ask me through the below comment box.
Leave a Reply