I am using Google Maps to autocomplete and convert an address to Latitude & Longitude. I can show it in a DIV but the problem is that when I try to pass this variable to PHP to store it in database it doesn't work. I tried passing it with AJAX and failed. I have also tried to directly pass it to PHP with POST. I cannot get this variable to send it to database.
Here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-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[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
var lat = document.getElementById('lat').innerHTML = place.geometry.location.lat();
var lon = document.getElementById('lon').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<form method = "post">
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id='lat'></div>
<div id='lon'></div>
<button type="submit" formaction="validate.php" name="submit" formmethod="post">Oddaj</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".clickable").click(function() {
var lat = $(this).attr('lat');
//alert($(this).attr('id'));
$.ajax({
type: "POST",
url: 'validate.php',
data: {
lat: lat,
lon: lon
},
success: function(data)
{
alert("success!");
}
});
});
});
</script>
and here is the PHP responsible to talk to database
<?php
header('Content-type: text/html; charset=utf-8');
if (isset($_POST['submit']))
{
$lat = $_POST['lat'];
$lon = $_POST['lon'];
}
else
{
echo "Nisem dobil!";
}
$con= mysqli_connect("localhost","username","password","database");
// Check connection
if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); }
// escape variables for security
$lat = mysqli_real_escape_string($con, $_POST['lat']);
$lon = mysqli_real_escape_string($con, $_POST['lon']);
$sql="INSERT INTO stranka (lon, lat) VALUES (" . $lon . ", ". $lat . ")";
if (!mysqli_query($con,$sql)) {
echo "Ta error je tukaj, ker že v 5 vrstici ne dobim variable.";
exit;
}
else {
echo "Uspelo je";
}
mysqli_close($con);
?>
Can someone point me to the result?
You've added 2 attributes to your button that are invalid: formaction formmethod
Although this is not the reason that it doesn't work.
The reason your form doesn't work is you haven't set the actual "action" of the form itself (you only added the attribute to the button, which is invalid). Your form should be:
<form method="post" action="validate.php">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id='lat'></div>
<div id='lon'></div>
<button type="submit" name="submit">Oddaj</button>
</form>
You also shouldn't need the jQuery click event either doing it this way.
Hope this makes sense.