• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

CodingStatus

- Free Source Code for Web Applications

  • programs
  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL
  • Interview Questions

Get Query String Value From URL Using JavaScript

October 17, 2022 By Md Nurullah

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.

Related posts:

  1. How to Count Textarea Characters Using JavaScript
  2.  How to Create Auto Resize Textarea Using JavaScript
  3. Create Cookie Consent Popup in JavaScript
  4. Calculate Marks Percentage in JavaScript

Filed Under: JavaScript

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 4 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Primary Sidebar

Latest Tutorials

  • Login with ajax in PHP, MySQL
  • Load Records on Select Box using Ajax, PHP & MySQL
  • Swapping of Two Numbers in python
  • How to Install Express Application Using Express Generator Tool
  • Registration Form using Ajax, PHP & MySQL

Popular Tutorials

  • JavaScript Word Guessing Game
  • JavaScript Color Picker Chrome Extension
  • How to Create JavaScript Accordion
  • JavaScript Password Strength Checker
  • JavaScript Countdown Timer

Categories

  • Ajax (12)
  • Django (5)
  • HTML (4)
  • Installation (3)
  • Interview Questions (5)
  • JavaScript (20)
  • jQuery (11)
  • Laravel (2)
  • Node.js (23)
  • PHP (42)
  • programs (1)
  • Python Programs (1)
  • ReactJS (35)
  • SQL (12)
  • Tips (7)
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved