PHP: calling javascript function with parameters from php

php javascript function google-maps google-maps-api-3

31,663

Solution 1

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.

Solution 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>

31,663

Author by

Rabeel

Currently working on CKEditor

Updated on February 05, 2020

Comments

Rabeel about 4 years

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

calling JavaScript function in PHP with script tags in echo i.e

<?php
echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';
?>

assigning PHP variables values to JavaScript variables

 <script>
 var lat="<?php echo $lat;?>";
 var lang="<?php echo $lang; ?>";
 var zoom="<?php echo $zoom; ?>";
 alert(lat+lang+zoom);
 initialize(lat,lang,zoom);
 </script>

In first case function is called as I cross-checked from page source but parameters passed are undefined. And in 2nd case values are successfully saved in JavaScript variables, check it by alert(), but function is not called.

Here is the whole code:

<!DOCTYPE html>

<html>

<head>

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

    </script>
<?php
     if(  isset($_POST['lat']) && isset($_POST['lang']) && isset($_POST['zoom']) && isset($_POST['city'])):

        $lat=$_POST['lat']; 

        $lang=$_POST['lang'];

        $zoom=$_POST['zoom'];

        $city=$_POST['city'];
        $zom=(int)$zoom;
              var_dump($lang);
        var_dump($lat);
        //var_dump($zoom);
              var_dump($zom);
          //echo '<script>initialize('.$lat.','.$lang.','.$zom.');</script>';

    endif;

?>          


<script>
var lat="<?php echo $lat; ?>";
var lang="<?php echo $lang; ?>";
var zoom="<?php echo $zoom; ?>";
alert(lat+lang+zoom);
initialize(lat,lang,zoom);
</script>

    <script>


function initialize(a,b,zom){        

    if (!a || !b ||!zom){ 
    alert('came on not' +a+b +zom);

    //      var centerLoc=new google.maps.LatLng( 33.61701054652337,73.37824736488983);

          zoom=16;

    }

    else

    {
        alert('came');

        var zoom =parseInt(zom);

        var centerLoc=new google.maps.LatLng(a,b);

    }

       var mapProp = {

            center:centerLoc,

            zoom:zoom,

            //mapTypeId:google.maps.MapTypeId.ROADMAP

            mapTypeId:google.maps.MapTypeId.SATELLITE

       };  

       var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp);

            marker=new google.maps.Marker({

                  position:centerLoc,

                  title:'Click to zoom'

             });

    google.maps.event.addListener(marker,'click',function() {

                map.setZoom(map.getZoom()+1);

                map.setCenter(marker.getPosition());

       });

            marker.setMap(map);

}

       google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body style= "background-color:gainsboro;">

    <form method="POST"  action="myPage.php" >

        Enter latitude:     <input type ="text" name="lat" id="lat" / ><br/>

        Enter longitude:    <input type ="text" name="lang"  id="lang"/ ><br/>

        Enter City Name:    <input type="text" name="city" id="city"/><br/>

        Enter Zoom level:   <input type ="text" name="zoom"  id="zoom"/ ><br/>

                        <input type="button" value ="Perview" onclick=" initialize(

                     document.getElementById('lat').value,

                     document.getElementById('lang').value,

                     document.getElementById('zoom').value)"/>

                        <input type="Submit"  value="Save" />

    </form>

                        <center><div id="googleMap"  style="width:1000px;height:500px;"></div></center>

</body>

</html>

Rabeel about 11 years

Thanks for your response but I dont need it to be called on window load
Chris Sprague about 8 years

Who would possibly downvote this answer? I provided three examples that answered the question with incrementally increasingly complexity along with videos that explain the point for users who prefer audio/video solutions. So, to the downvoter, please explain instead of doing a hit-and-run!!!