I am trying to post a javascript variable to PHP so that I can update the database on my localhost. The PHP seems to connect to the database but the database is not being updated.
<?php
include "main.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="css/style.css" rel="stylesheet">
<!-- START OF GEOLOCATION -->
<center><div class="round-button"><div class="round-button-circle"><a onclick= "getLocation()" class="round-button">HELP</a></div></div></center>
<p id="demo"></p>
<script src="js/jquery.js"></script>
<script>
var glob_latitude = '';
var glob_longitude = '';
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
}
///send to ip
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
glob_longitude = position.coords.longitude;
glob_latitude = position.coords.latitude;
$.post( "main.php", { latitude: glob_latitude, longitude: glob_longitude } postPosition(position);
}
function postPosition(position){
$.post('main.php',{
latitude: position.coords.latitude,
longitude: position.coords.longitude,
},function(phpScriptResponse){
if(phpScriptResponse !== "ok"){ x.innerHTML= phpScriptResponse; }
}
}
);
}
</script>
</body>
</html>
here is the PHP code that's supposed to update the database after connecting ...
<?php
$dbConnection = mysqli_connect("localhost", "root" , "" ,"info");
if($dbConnection)
{
echo "connected";
if(isset($_POST['latitude']) and isset($_POST['longitude'])){
echo "hi";
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];
if($latitude != '' and $longitude != '')
echo "hi";
$query = mysqli_query("INSERT INTO info VALUES (NULL, '{$latitude}', '$longitude')");
}
}
else
die();
mysqli_close($dbConnection);
?>
Where do you post the data to your PHP? All I see us a '<a onclick= "getLocation()"', and in the function you get the position, but you stop there. Your function need to call your PHP script about the data change:
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
return ;
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
var data = {
'longitude': position.coords.longitude,
'latitude': position.coords.latitude
} ;
// now tell PHP via Ajax
$.post ('myphp.php', data, function (ret, status) { alert (ret) ; }) ;
}
And because I send a json object, you may need to adapt the PHP script a bit.
Take a look at http://api.jquery.com/jquery.post/
var glob_latitude = '';
var glob_longitude = '';
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
}
///send to ip
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
glob_longitude = position.coords.longitude;
glob_latitude = position.coords.latitude;
postPosition(position);
}
function postPosition(position){
$.post('url/to/your.php',{
latitude: position.coords.latitude,
longitude: position.coords.longitude,
},function(phpScriptResponse){
if(phpScriptResponse !== "connectedhihi"){
// error
}
}
);
}
As so far you don't have a form in your html file you can use AJAX to process your data to PHP. At this moment don't include main.php file
var glob_latitude = '';
var glob_longitude = '';
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
}
///send to ip
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
glob_longitude = position.coords.longitude;
glob_latitude = position.coords.latitude;
var http = new XMLHttpRequest();
var url = "main.php";
var params = "latitude="+glob_latitude+"&longitude="+glob_longitude+"";
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form- urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
}