Unable to use a php variable in Javascript

Question

I've been trying to use a php variable inside a JS script to no avail, I've read three threads including: how to use PHP variable in Javascript Access PHP variable in JavaScript How to access PHP variables in JavaScript or jQuery rather than <?php echo $variable ?>

But I still cannot manage to make it work for myself, I'm trying to make a chart with but replacing the names inside with php variables that I will get/give: https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1

my code:

<?php

   
$post_grandfather = "Dodo";
echo $post_grandfather;
    ?>

<html>
  <head>

    <script type="text/javascript">
   var myvariable1 = "<?php echo $post_grandfather; ?>";
        var a = <?php echo json_encode($post_grandfather); ?>;
</script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);
        document.write(5 + 6);
      function drawChart() {
        var data = new google.visualization.DataTable();
        var myvariable = <?php echo json_encode($post_grandfather); ?>;
    
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':String(a), 'f':String(a)'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', ''],
          ['Hamad','Alice', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>

  </body>
</html>

Please help

What happens when you try, and what does `$post_grandfather;` contain? If you view the browser source, what do you see? — aynber, Jan 22 '21 at 20:17
"Can't get it to work" isn't a helpful description. Do you get errors? You probably should, because you're trying to redeclare `var myvariable1`. Check your browser console. — El_Vanja, Jan 22 '21 at 20:19
`var myvariable1 = '';` Remember, you are not "using" PHP variables in JavaScript, that's not how it works. PHP is *generating* an HTML page with JavaScript that the browser renders/runs. So, you need to have your PHP generate valid JavaScript code. You need to add quotes, because otherwise your generated page is `var myvariable1 = Dodo;` which is valid JavaScript, but I'm sure you meant the *string* `'Dodo'`, not a variable called `Dodo`. What could help out here is to check the browser's console for JavaScript errors. — gen_Eric, Jan 22 '21 at 20:19
I deleted the script at the beginning because it gives "Parse error: syntax error, unexpected token "<", expecting end of file in C:\xampp\htdocs\phpchart\family.php on line 6" constantly. — Askar Taishenov, Jan 22 '21 at 20:22
"Can't get it to work" isn't a helpful description. Do you get errors? You probably should, because you're trying to redeclare var myvariable1. Check your browser console." My problem is that I can't use the variables I create inside the brackets where the names exist. I don't get any errors, just blank page. — Askar Taishenov, Jan 22 '21 at 20:24

spzout · Answer 1 · 2021-01-23T05:42:31.753

You shoud put the php echoing in quotes and you also need to use + for concatenation in javascript:

<?php

$post_grandfather = "Dodo";
echo $post_grandfather;
?>

<html>
<head>

    <script type="text/javascript">
        var myvariable1 = '<?php echo addslashes($post_grandfather); ?>';
        var a = '<?php echo addslashes($post_grandfather); ?>';
    </script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {packages:["orgchart"]});
        google.charts.setOnLoadCallback(drawChart);
        document.write(5 + 6);
        function drawChart() {
            var data = new google.visualization.DataTable();
            var myvariable = '<?php echo addslashes($post_grandfather); ?>';

            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
                [{'v':String(a), 'f': a + ' Mike<div style="color:red; font-style:italic">President</div>'},
                    '', 'The President'],
                [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
                    'Mike', 'VP'],
                ['Alice', 'Mike', ''],
                ['Bob', 'Jim', 'Bob Sponge'],
                ['Carol', 'Bob', ''],
                ['Hamad','Alice', '']
            ]);

            // Create the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            // Draw the chart, setting the allowHtml option to true for the tooltips.
            chart.draw(data, {'allowHtml':true});
        }
    </script>
</head>
<body>
<div id="chart_div"></div>

</body>
</html>

This should give: Screenshot of the result

Unable to use a php variable in Javascript

1 Answers1