Get Query String Value From URL Using JavaScript

by

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

get query string value from url using jquery

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.

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&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 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 parameter and assign it to a variable getQueryStringValue.
  • 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 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"

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 Comment