Get Query String Value From URL Using JavaScript

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 different types of query string. You will also get 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 form URL So that you can easily access dynamic content form the database using back-end language.

Demo –  If you want to  see live demo then click the following URL

See Live Demo

In this tutorial, I will show you a basic example by getting query string value. Once you will learn it, you will quickly get another different types of query string URL

How to Get Query String From URL Using JavaScript

Before getting started coding, you should know about the query string –

Query string is the part of an URL. It assigns a value to a parameter and joins to an web page URL with question mark ?.

More than two query strings are always declared with ampersand &. Keep remember 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&parameter2=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 string. Now You can declare more query string according to your project requirement.

Now, Configure the following steps. These step will help you quickly to get query string from URL.

1. Create Query String URL Using HTML

Configure the following points –

• Write the HTML code to create a link with query string URL.
• Create a HTML button to get query string value on click.
• Create a section to display query string value.

<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>

2. Create Custom javaScript Function

Configure the following points –

• Create a custom javaScript function with a arguments parameter and assign it to a variable getQueryStringValue.
• Get current page URL and assign to a variable currentPageURL
• Get all the query string and assign to a variable queryString
• Decalare a for loop with queryString
• Get parameter from URL & assign to a variable getParameter
• If getParameter[0] === parameter, then return query string value.

<script type="text/javascript">
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]);
        }
    }
};
</script>

3. Get Query String Value Using JavaScript Function

Also, Configure the following points –

• Apply click event on a button id="getValue"
• Pass query string id parameter to function getQueryStringValue() and assign it to a variable id.
• Pass query string language parameter to function getQueryStringValue() and assign it to a variable language.
• Display id value & language value in section id="result"

<script type="text/javascript">
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;

 };
</script>

You can use the following CSS Code to design query string URL.

.query-string a{
  display: block;
  margin: 15px 0px;
  text-decoration: none;
}
#getValue{
  border: 0px;
  background: #f9023b;
  color: white;
  padding: 4px 10px;
}
#getValue:hover{	
    box-shadow: 0px 0px 15px #00000040;
}
html,body{
 padding: 0px;
 margin:0px;
 overflow-x: hidden;
}
.query-string{
 padding: 20px;
}

Use Complete Script –

use the following complete script directly in your project –

<!DOCTYPE html>
<html>
<head>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
.query-string a{
 display: block;
 margin: 15px 0px;
 text-decoration: none;
}
#getValue{
  border: 0px;
  background: #f9023b;
  color: white;
  padding: 4px 10px;
}
#getValue:hover{	
    box-shadow: 0px 0px 15px #00000040;
}
html,body{
 padding: 0px;
 margin:0px;
 overflow-x: hidden;
}
.query-string{
 padding: 20px;
}
  </style>
</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">
 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]);
        }
    }
};
</script>
</body>
</html>

Summary –

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.