How to get URL parameter inside javascript?

Question

I'm new to JavaScript and PHP.

I'm trying to post url with URL parameter inside JavaScript. How can I achieve it?

Here is my page URL : https://localhost/test/home.php?id=07

function showStackedVerticalChart() {
  { // I want to add above URL parameter to this URL (id=07)
    $.post("partials/get-chart-data.php?chart_type=vertical-bar&id=07",
      function(data) {
        var chartdata = {
          labels: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5", "Line 6", "Line 7", "Line 8", "Line 9", "Line 10",
            "Line 11", "Line 12", "Line 13", "Line 14", "Line 15", "Line 16", "Line 17", "Line 18", "Line 19", "Line 20",
            "Line 21", "Line 22", "Line 23", "Line 24", "Line 25", "Line 26", "Line 27", "Line 28", "Line 29", "Line 30", "Line 31", "Line 32"
          ],
          datasets: data
        };

        var graphTarget = $("#stacked-vertical-chart");

        var graph = new Chart(graphTarget, {
          type: 'bar',
          data: chartdata,
          options: {

            scales: {
              xAxes: [{
                barPercentage: 0.5,
                stacked: true
              }],
              yAxes: [{
                stacked: true
              }]
            }
          }
        });
      });
  }
}

I tried adding this inside the script.

$id = $_GET['id'];
$.post("partials/get-chart-data.php?chart_type=vertical-bar&'" . $mo . "' "

no mention of using native Javascript methods such as URLSearchParams — Professor Abronsius
– Professor Abronsius, Commented Jul 18, 2023 at 6:32
Does this answer your question? Get query string parameters url values with jQuery / Javascript (querystring) — gre_gor
– gre_gor, Commented Dec 8, 2023 at 0:27

Professor Abronsius · Accepted Answer · 2023-07-18 06:45:46Z

Rather than calling upon PHP to process and render a javascript variable you can do it all in Javascript - making use of the URLSearchParams api

/*
  The URLSearchParams api allows access to the querystring
  - to get/set etc but does not parse the full url so
  the url needs to be pre-processed to create the 
  querystring.
  
  When using with the actual page url you can use
  location.search instead.
*/

let pageurl='https://localhost/test/home.php?id=07';
let [ url, query ]=pageurl.split('?');


let args=new URLSearchParams( query );
console.log( 'The ID from the url string is:', args.get('id') );

To add that into the above function you could do something like

function showStackedVerticalChart() {
    let href=document.location.search();
    let args=new URLSearchParams( href );
    let id=args.has('id') ? args.get('id') : 0;
    
    $.post(`partials/get-chart-data.php?chart_type=vertical-bar&id=${id}`,
        function(data) {
            var chartdata = {
                labels: [
                    "Line 1", "Line 2", "Line 3", "Line 4", "Line 5", "Line 6", "Line 7", "Line 8", "Line 9", "Line 10",
                    "Line 11", "Line 12", "Line 13", "Line 14", "Line 15", "Line 16", "Line 17", "Line 18", "Line 19", "Line 20",
                    "Line 21", "Line 22", "Line 23", "Line 24", "Line 25", "Line 26", "Line 27", "Line 28", "Line 29", "Line 30", "Line 31", "Line 32"
                ],
                datasets: data
            };
            var graphTarget = $("#stacked-vertical-chart");
            var graph = new Chart(graphTarget, {
                type: 'bar',
                data: chartdata,
                options: {
                    scales: {
                        xAxes: [{
                            barPercentage: 0.5,
                            stacked: true
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }
            });
        }
    );
}

mplungjan · Accepted Answer · 2023-07-18 06:37:07Z

0

First, get the id value in the PHP code block like

<?php $id = $_GET['id']; ?>

Then echo the id variable inside JS like this

$.post("partials/get-chart-data.php?chart_type=vertical-bar&id=<?php echo $id;?>"

edited Jul 18, 2023 at 6:37

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jul 18, 2023 at 6:01

Suvash sarker

3,1451 gold badge21 silver badges23 bronze badges

2 Comments

mplungjan Over a year ago

Just beware of XSS here. You might want to sanitize the var

CherryDT Over a year ago

Should be urlencode($id)

Collectives™ on Stack Overflow

How to get URL parameter inside javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related