RiccardoQuest
asked on
GPS save in database
This problem has been going on for a little while and I'm pretty sure I'm really close to achieving what I need.
I have a GPS script using javascript that uses the function geoFindMe() to output into the id of the div "show".
However, this displayed both longitude and latitude as one.
Therefore I decided to separate them by using .values in the javascript so that in the form both values would be separated.
This worked however it takes two clicks to actually get the GPS information in the two inputs.
This will be a part of a form where on SUBMIT of that form the longitude and latitude are stored in the database without the user seeing anything so their location can be verified at a later date.
I need help creating this so that on the input submit the location longitude and latitude is stored in a MySQL database.
stack.html
I have a GPS script using javascript that uses the function geoFindMe() to output into the id of the div "show".
However, this displayed both longitude and latitude as one.
Therefore I decided to separate them by using .values in the javascript so that in the form both values would be separated.
This worked however it takes two clicks to actually get the GPS information in the two inputs.
This will be a part of a form where on SUBMIT of that form the longitude and latitude are stored in the database without the user seeing anything so their location can be verified at a later date.
I need help creating this so that on the input submit the location longitude and latitude is stored in a MySQL database.
stack.html
Last Comment
ASKER
It's shown as one variable in Show. I need it separated so it can be stored in the database as longitude and latitude separate fields. I just want the show id split into two and stored into database upon one click
Here is the code, in the code snippet so we can all see it without having to download a file.
<script>
var latitude = 0;
var longitude = 0;
function geoFindMe() {
var output = document.getElementById("show");
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=20&size=300x300&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating...</p>";
fillLatitudeLongitudeElements();
navigator.geolocation.getCurrentPosition(success, error);
function fillLatitudeLongitudeElements(){
document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
var sql = "INSERT INTO gps(lat, long) VALUES (latitude,longitude)";
}
}
function prompt(window, pref, message, callback) {
let branch = Components.classes["@mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefBranch);
if (branch.getPrefType(pref) === branch.PREF_STRING) {
switch (branch.getCharPref(pref)) {
case "always":
return callback(true);
case "never":
return callback(false);
}
}
let done = false;
function remember(value, result) {
return function() {
done = true;
branch.setCharPref(pref, value);
callback(result);
}
}
let self = window.PopupNotifications.show(
window.gBrowser.selectedBrowser,
"geolocation",
message,
"geo-notification-icon",
{
label: "Share Location",
accessKey: "S",
callback: function(notification) {
done = true;
callback(true);
}
}, [
{
label: "Always Share",
accessKey: "A",
callback: remember("always", true)
},
{
label: "Never Share",
accessKey: "N",
callback: remember("never", false)
}
], {
eventCallback: function(event) {
if (event === "dismissed") {
if (!done) callback(false);
done = true;
window.PopupNotifications.remove(self);
}
},
persistWhileVisible: true
});
}
prompt(window,
"extensions.foo-addon.allowGeolocation",
"Foo Add-on wants to know your location.",
function callback(allowed) { alert(allowed); });
</script>
<p><button onclick="geoFindMe()">Locate</button></p>
<div id="show"></div>
<?php include "../dbconnect.php";
if(isset($_POST['sub'])){
$l = $_POST['long'];
$la = $_POST['lat'];
$n = $_POST['name'];
mysql_query("INSERT INTO `gps`(`lat`, `long`, `name`) VALUES ('".$la."','".$l."','".$n."')");
echo "Done though";
}
?>
<form action="#" method="post">
<fieldset>
Latitude3:<br>
<input id="latitude" type="text" name="firstname" value="latitude" readonly><br>
Longitude:<br>
<input id="longitude" type="text" name="lastname" value="longitude" readonly><br><br>
<input type="submit" value="Submit" name="sub">
</fieldset>
</form>
I would like to separate the show output so i can later store the longitude and lattitude into my table in sql
ASKER
i have changed the name="firstname" and name="lastname" to "lat" and "long"
Please have a look at the PHP script starting on line 107, and the HTML document starting on line 124. The $_POST associative array keys are usually expected to match the name= attributes in the HTML form, but they do not in this part of the code. Unless your JS is adding more form elements somewhere else, you might want to use var_dump($_POST) and see what is getting transmitted to the PHP script by the HTTP request.
Here is how to handle the MySQL remediation. This is no longer "optional" or a future issue. There is no current version of PHP that still has the MySQL extension, except in deprecated status.
https://www.experts-exchange.com/articles/11177/PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html
Here is how to handle the MySQL remediation. This is no longer "optional" or a future issue. There is no current version of PHP that still has the MySQL extension, except in deprecated status.
https://www.experts-exchange.com/articles/11177/PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Updated! If you press Locate twice it happens however i need it to work with one press as i want this to work in the background of another form and the output will be input type="hidden" then inserted in to the database
stack.html
stack.html
ASKER
<script>
var latitude = 0;
var longitude = 0;
function geoFindMe() {
var output = document.getElementById("show");
if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}
function success(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=20&size=300x300&sensor=false";
output.appendChild(img);
};
function error() {
output.innerHTML = "Unable to retrieve your location";
};
output.innerHTML = "<p>Locating...</p>";
fillLatitudeLongitudeElements();
navigator.geolocation.getCurrentPosition(success, error);
function fillLatitudeLongitudeElements(){
document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}
}
function prompt(window, pref, message, callback) {
let branch = Components.classes["@mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefBranch);
if (branch.getPrefType(pref) === branch.PREF_STRING) {
switch (branch.getCharPref(pref)) {
case "always":
return callback(true);
case "never":
return callback(false);
}
}
let done = false;
function remember(value, result) {
return function() {
done = true;
branch.setCharPref(pref, value);
callback(result);
}
}
let self = window.PopupNotifications.show(
window.gBrowser.selectedBrowser,
"geolocation",
message,
"geo-notification-icon",
{
label: "Share Location",
accessKey: "S",
callback: function(notification) {
done = true;
callback(true);
}
}, [
{
label: "Always Share",
accessKey: "A",
callback: remember("always", true)
},
{
label: "Never Share",
accessKey: "N",
callback: remember("never", false)
}
], {
eventCallback: function(event) {
if (event === "dismissed") {
if (!done) callback(false);
done = true;
window.PopupNotifications.remove(self);
}
},
persistWhileVisible: true
});
}
prompt(window,
"extensions.foo-addon.allowGeolocation",
"Foo Add-on wants to know your location.",
function callback(allowed) { alert(allowed); });
</script>
<p><button onclick="geoFindMe()">Locate</button></p>
<div id="show"></div>
<?php include "../dbconnect.php";
if(isset($_POST['sub'])){
$l = $_POST['long'];
$la = $_POST['lat'];
$n = $_POST['name'];
mysql_query("INSERT INTO `gps`(`lat`, `long`, `name`) VALUES ('".$la."','".$l."','".$n."')");
echo "Done though";
}
?>
<form action="#" method="post">
<fieldset>
Latitude0:<br>
<input id="latitude" type="text" name="lat" value="latitude" readonly><br>
Longitude:<br>
<input id="longitude" type="text" name="long" value="longitude" readonly><br><br>
<input type="submit" value="Submit" name="sub">
</fieldset>
</form>
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Cant believe that was it. Its so annoying that i had it similair to that but i moved the bracket so it was outside the handler. Im unable to save it in the database though through "sub"
ASKER
Silly me I forgot to rename the file .php Thank you again, Julian Hansen and Ray Paseur for both your help yet again :)
ASKER
Is there anyway to get the "Submit" button to post the gps when submitting the form? So another words just one button to do all ?
Ok let's look at your server side
Firstly there is no name field being sent through - only lat and long.
A useful exercise is to add this line to the beginning of your <?php section
What I would do is this
(NB: I am using your mysql_query code - but as mentioned above you should move to mysqli);
Also fix your mysql_query (seriously suggest you move to mysqli) but in the meantime you need to include a connection handle in the mysql_query() call
Firstly there is no name field being sent through - only lat and long.
A useful exercise is to add this line to the beginning of your <?php section
echo "<pre>" . print_r($_POST, true) . "</pre>";
What I would do is this
(NB: I am using your mysql_query code - but as mentioned above you should move to mysqli);
<?php
// Extract lat / long / name fields and sanitize the values
$latitude = isset($_POST['lat']) ? (float)$_POST['lat'] : false;
$longitude = isset($_POST['long']) ? (float)$_POST['long'] : false;
$name = isset($_POST['name']) ? mysql_real_escape_string($_POST['name']) : false;
// Only proceed if we have valid data
if ($latitude && $longitude && name) {
// Construct query using HEREDOC
// Cleaner. Also using embedded variables rather than messy string concat
$query = <<< QUERY
INSERT INTO `gps` (`lat`,`long`,`name`)
VALUES ('{$latitude}','{$longitude}','{$name}')
QUERY;
// NB: You don't include a connection resource in your mysql_query call
// Assuming it is $conn.
$result = mysql_query($query, $conn);
if (!$result) {
echo "Error: " . mysql_error($conn) . "<br/>";
}
}
Also fix your mysql_query (seriously suggest you move to mysqli) but in the meantime you need to include a connection handle in the mysql_query() call
Here's a simplified solution. It might be easiest to start with something like this and build up the application a step at a time. This uses a GET-method request to display the location data, but by the time the web page is loaded, the location data has already been identified and stored in the HTML form input control values. So you could, in theory, skip the submit button and just display the location, or just pass the location through an AJAX request to a background PHP script that can write to your database.
https://iconoun.com/demo/temp_riccardo.php
https://iconoun.com/demo/temp_riccardo.php
<?php // demo/temp_riccardo.php
/**
* https://www.experts-exchange.com/questions/28976860/GPS-save-in-database.html
*
* https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
*
* https://www.experts-exchange.com/articles/4276/What-is-near-me-Proximity-calculations-using-PHP-and-MySQL.html
* https://www.experts-exchange.com/articles/3350/Using-the-Google-Maps-API-in-PHP-and-JavaScript.html
* https://www.experts-exchange.com/articles/9854/Using-GeoCodes-to-Find-an-Average-Location.html
*/
error_reporting(E_ALL);
// SHOW THE REQUEST VARIABLES, IF ANY
$get = NULL;
if (!empty($_GET)) $get = print_r($_GET, TRUE);
// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
/* STYLE SHEET HERE */
</style>
<script>
function success(pos) {
var location = pos.coords;
document.getElementById("my_lat").value = location.latitude;
document.getElementById("my_lon").value = location.longitude;
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
navigator.geolocation.getCurrentPosition(success, error, options);
</script>
<title>HTML5 Page With Simple Geo-Location</title>
</head>
<body>
<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>
<div>$get</div>
<form>
<input type="hidden" id="my_lat" name="lat" value="" />
<input type="hidden" id="my_lon" name="lon" value="" />
<input type="submit" value="Where am I?" />
</form>
</body>
</html>
HTML5;
// RENDER THE WEB PAGE
echo $htm;
So another words just one button to do all ?Yes you can do this.
Simply add this
document.forms[0].submit();
fillLatitudeLongitudeElements();
So another words just one button to do all ?Or not even a button at all. Just get the geocode (latitude+longitude) and start the AJAX request to your background database script as soon as you have the geo data.
ASKER
How would i go about that? On page load ?
Probably. This might be worth posting another question :-)
How would i go about that? On page load ?My advice - get on top of the basics first - there is a lot here that you still need to master and if you start adding more unknown territory to the application you could end up confusing yourself.
Get this working solidly as a form post - and make sure you understand how all the moving parts work. Once you have done that you can look at moving to using AJAX.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
The mysql library is deprecated - you should consider using mysqli instead.
Secondly,
The Components object is deprecated. It will soon be removed. - from console.
Third, after running your code Lattitude and Longitude show in the <div id="show"></div>
So need to understand what the question is?