CODEWITHSUNDEEP
phpjqueryhtmlgoogle-maps
PublicDisplayName
PublicDisplayName

Reputation: 317

Get values from hidden <input> and use in jQuery function

I'm using gmaps.js as an interactive map on my site. The library allows you to add new map markers using long/lat co-ordinates. These are stored in my database, which I retrieve (along with other data) and echo this data like so:

<input id="lat" type="hidden" value="'.$lat.'"/>
<input id="long" type="hidden" value="'.$long.'"/>

There is other data being echoed, which is why you cannot see any <?php ?> tags - this is not a syntax mistake!

When I inspect element on the front end of my site, I can see the corresponding values have echoed successfully.

The issue I'm having is getting the values stored in the <input> tags into my jQuery function.

I want to get each of the long and lat values into here:

map.addMarker({
  lat: $lat,
  lng: $long,
  title: 'Lima',
  }
});

However as I understand, it's bad practice to echo PHP straight into a jQuery function.

Therefore, I have tried to do the following:

$(document).ready(function(){

 $("lat").val();
 $("long").val();

 $.each( markers, function( index, value ) {

     var markers = {
            lat: value.lat,
            lng: value.long,
        }

 });

});

What do you suggest?

Thanks in advance for your time!

Upvotes: 0

Views: 203

Answers (3)

Napoleon
Napoleon

Reputation: 340

I'm not the most advanced programmer, but I know a cleaner solution for your problem.

JSON I understand you use PHP to retrieve your coordination, and you want your results displayed in a manner that Javascript can understand. Well, there's a better way for communicating between languages, it's called JSON. You can use it in PHP like this: 

echo json_encode(["lat"=>$lat,"long"=>$long]);

Then you can retrieve it in Javascript like this:

var LatLong = JSON.parse('{"lat":"lat","lon":"long"}');

You can then use normal Javascript to retrieve both the Lat and the Long. Simply by doing LatLong.lat or something alike.

AJAX Normally I would use AJAX for such things, but I suppose you don't have to.

Finally, code

Here's an example of how I would do it without AJAX

var parseString = '{"lat":"lat","long":"long"}'; // <-- Your PHP echo
var LatLong = JSON.parse(parseString);

    map.addMarker({
      lat: LatLong.lat,
      lng: LatLong.long,
      title: 'Lima',
      }
    });

Upvotes: 2

jjwdesign
jjwdesign

Reputation: 3322

I assume you have the lng/lat data in a Database accessible by PHP. So, then you can just pass it to your client side javascript via json_encode(). The code below assumes you have a array of row objects from your database.

   <script>
   // Created data from PHP
   var mapData = <?php echo (!empty($data)) ? @json_encode($data) : '[]'; ?>;
   </script>

Then just continue as you were, using $.each(), etc.

Upvotes: 0

dantella
dantella

Reputation: 66

In first, in JQuery to select an element by Id you need to insert # before html id

 $("#lat").val();
 $("#long").val();

Then, I don't understand your code, but as I can see the two lines above don't make anything, get value from input element but don't save them to any variable.

Upvotes: 2

Related Questions