How to pass div id value to PHP variable? - php

Question

I am using an auto complete form to find "lat" and "lng" for a city name and it works fine. I get the correct values in div id="lat" and div id="lng" but I want to use these values in php variables as $latitude="lat" and $longitude="lng" to use them in a php script that needs $latitude and $longitude?
I have been trying many of the solutions presented here, but my knowledge is too short to make it work.
The script is:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=MY_KEY&libraries=places">
</script>
<script>
function initialize() {
var address = (document.getElementById('city-input'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function()
{
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('lng').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<input id="city-input" class="controls" type="text"
placeholder="Enter a location">
<div id="lat"></div>
<div id="lng"></div>
And for the php part I am trying this with no result at all
<?php
$latitude = (isset($_GET['lat']))?$_GET['lat']:'';
$longitude = (isset($_GET['lng']))?$_GET['lng']:'';
echo $latitude;
echo $longitude;
?>
Is there any way to do what I intend to do? (get $latitude and $longitude with the values that were correctly obtained from googleapis?)
Thank you so much for any precious help :-)

Answer 1

I am sorry for confusing vanialla JS with jquery. But I'm trying my best to help.
You can do it using ajax
get the lat value and long value and pass it to ajax data. lets call it
latjs and lonjs
$.ajax({
type: "POST",
url: "lat_lon.php",
data: "lat="+latjs+"&lon="+lonjs,
success: function (html) {
if (html === 'true') {
at the php side, capture it this way:
$data = file_get_contents('php://input');
if($data != null) {
parse_str($data, $output);
$output_lan = $output['lat'];
$output_lon = $output['lon'];
blah blah process
}

Answer 2

The last 2 assignment code is wrong:
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('long').innerHTML = place.geometry.location.lng();
The above should be
$("#lat").html(place.geometry.location.lat());
$("#long").html(place.geometry.location.lng());
the code is not 100% working, but should be in the above lines. no need to use get elementbyID and all.
Hope this helps
VInay KR