PHP: calling javascript function with parameters from php

Question

I am trying to call JavaScript function with parameter that are PHP variables. I have tried 2 approaches.

1. calling JavaScript function in PHP with script tag

Answer 1

Just call on the predefined java script code like jsFunction() ; in your php code

Answer 2

Call the function when the browser finished loading the javascript.

<script>
     window.onload = function() {
         var lat="<?php echo $lat; ?>";
         var lang="<?php echo $lang; ?>";
         var zoom="<?php echo $zoom; ?>";
         alert(lat+lang+zoom);
         initialize(lat,lang,zoom);
     };
</script>

Answer 3

Use json_encode(). If you don't there will always be the possibility you escaped your data incorrectly as it passes from the PHP to the HTML/JS layer.

$vars = array($lat, $lang, $zoom);
// JSON_HEX_TAG and JSON_HEX_AMP are to remove all possible surprises that could be
// caused by vars that contain '</script>' or '&' in them. The rules for 
// escaping/encoding inside script elements are complex and vary depending 
// on how the document is parsed.
$jsvars = json_encode($vars, JSON_HEX_TAG | JSON_HEX_AMP);

echo "<script>initialize.apply(null, $jsvars)</script>";

In general, for your sanity, all data that is in PHP that you need to make available to js running on the current page should be collected into a single PHP array and then placed into a single js object. For example:

<?php
$jsdata = array(
   'formvars' => array(
                      'lat' => $lat,
                      'lang' => $lang,
                      'zoom' => $zoom
    ),
   'username' => $username,
   'some_other_data' => $more stuff
);
?>
<script>
  var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;
  initialize(JSDATA.formvars.lat, JSDATA.formvars.lang, JSDATA.formvars.zoom);
</script>

Now there is only a single point of contact between the JS and PHP/HTML layers so you can easily keep track of what you are putting into the JS namespace.

Answer 4

I found some really good examples on Calling a javascript function from php and it appears you can also run the code online at PhpFiddle.org

Just in case the links break, here are the examples:

Example 1: Calling without parameters

<?php
echo "<a href='http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/'>Full example at: http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/</a>";
echo "<p>Add whatever PHP you want here...</p>";
?>
<!--This JS function can be defined here or a separate file since so long as it gets created in JS space'-->
<script>
    function callAlert(){
        alert('A alert without a parameter');
    }
</script>
<script>
    callAlert();
</script>
<?php
?> 

Example 2: Calling with a single parameter

<?php
echo "<a href='http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/'>Full example at: http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/</a>";
echo "<p>Add whatever PHP you want here...</p>";

//Data that is going to be passed into the JavaScript function. Try to keep all vars together so
//that it's easier to track down the php/javascript interaction
$jsdata = 'MyName';
?>
<!--This JS can be here or a separate file since all it's doing is defining a function in the JS space'-->
<script>
    function callAlert(text){
        alert(text);
    }
</script>
<!--This JS must be defined with the php since it's using previously defined php variables -->
<script>
    var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;

    //Prompt using a single var
    callAlert(JSDATA);
</script>
<?php
?>

Example 3: Calling using an array of parameters

<?php
echo "<a href='http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/'>Full example at: http://www.hoverdroids.com/2015/06/10/calling-a-javascript-function-from-php/</a>";
echo "<p>Add whatever PHP you want here...</p>";

$myname = 'MyName';
$yourname = 'YourName';

//Data that is going to be passed into the JavaScript function. Try to keep all vars together so
//that it's easier to track down the php/javascript interaction
$jsdata = array(
                'input' => $myname,
                'array_input' => array(
                                        'name' => $yourname
                ),
);
?>
<!--This JS can be here or a separate file since all it's doing is defining a function in the JS space'-->
<script>
    function callAlert(text){
        alert(text);
    }
</script>
<!--This JS must be defined with the php since it's using previously defined php variables -->
<script>
    var JSDATA = <?=json_encode($jsdata, JSON_HEX_TAG | JSON_HEX_AMP )?>;

    //Prompt using a single var in the array
    callAlert(JSDATA.input);


    //Prompt using a var from a nested array    
    callAlert(JSDATA.array_input.name);
</script>
<?php
?>