从Javascript GPS代码插入数据库

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 :)

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!