Insert into db from Javascript GPS code

Question

I have a GPS script which I need to implement into my form in the background separately.

However, before I move on to implementing it with the form I need to see how to insert the latitude and longitude separately into two fields called "long" and "lat" in the database.

I have managed to separate them both into two div however still can not get it into my database.

He is the full GPS page code:

    <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>";
  fillLatitudeLongitudeDivs();
  navigator.geolocation.getCurrentPosition(success, error);
}

function fillLatitudeLongitudeDivs(){
    document.getElementById("latitude").innerHTML = latitude;
    document.getElementById("longitude").innerHTML = 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 if(isset($_POST['sub'])){ $lat = $_post['lat']; $lat = $_post['long']; echo $lat; } ?>

 <form method="post" action="#">
 <input id="latitude" name="lat">
  <input id="latitude" name="long">
  <input type="submit" name="sub" value="sub">
     </form>

--- UPDATED ---

<script>
    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>

 <?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";

 }
  ?>

<p><button onclick="geoFindMe()">Locate</button></p>
<div id="show"></div>


 <form action="#" method="post">
 <fieldset>
Latitude 6:<br>
<input id="latitude" type="text" name="lat" readonly><br>
Longitude:<br>
<input id="longitude" type="text" name="long" readonly><br><br>
<input onclick="geoFindMe()" type="submit" value="Submit">
 </fieldset>
</form>

Has been editied by adding ---UPDATED--

Thank you in advance :)

1.what do you means? 2.you need to insert `data` into `db` whenever form submit by user? 3. where is your `insert` block — Karthi, Oct 17 '16 at 10:26
Do you have a button to save the long/lat? If so then you just need to set the long/lat into 2 hidden variables and then send them in the post. — Richard Housham, Oct 17 '16 at 10:29
Ive taken the insert block out because it didnt work. Im trying to insert the longitutde and lattitude into the db. Ive attempted to extract the data into two different divs but not inot the db — user3473873, Oct 17 '16 at 10:33
@RichardHousham thats something i havent tried ill try that now :) — user3473873, Oct 17 '16 at 10:35

score 0 · Answer 1 · edited May 23 '17 at 11:48

check this: send javaScript variable to php variable

you may create new php file that takes 2 parameters and then insert that data to the database and then call that page.

so here's how the php file has to be:

$lat = $_GET['lat'];
$lon = $_GET['lon'];

$insert = "insert into `table_name` (lat, lon) values ('$lat', '$lon')";
//some sql to run the query
if(inserted())
    echo 'done';
else
    echo 'failed';
//just for testing
function inserted(){
    return true;
}

then you'll need to call this file using from client's browser when he sets his location. and here's an example using jQuery:

<script type="text/javascript">
    //make a get call to add.php
    function addToDB(lat, lon) {
        $.get('path_php_file/file.php?lat=' + lat + '&lon=' + lon, function(data) {
            //data refers to the response
            //check if the response == done
            if(data == 'done')
                alert('done!');
            else
                alert('failed!');
        });
    }
    //call the function when user sets his location
    addToDB(1, 2);
</script>

Hope this helps you!

It doesnt need to add it to the url though i just simply need to know how to take the javascript variable and put it into a mysql db like "INSERT INTO tablename" etc — user3473873, Oct 17 '16 at 10:34
you have to send the JavaScript variable to your server before the server can handle the value. — Mostafa Saeed, Oct 17 '16 at 10:48

Insert into db from Javascript GPS code

1 Answers1