Insert into db from Javascript GPS code
<p>I have a GPS script which I need to implement into my form in the background separately. </p>

<p>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.</p>

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

<p>He is the full GPS page code:</p>

<pre><code>    &lt;script&gt;
        var latitude    = 0;
        var longitude   = 0;

function geoFindMe() {
  var output = document.getElementById("show");

  if (!navigator.geolocation){
    output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
    return;
  }

  function success(position) {
    latitude  = position.coords.latitude;
    longitude = position.coords.longitude;

    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '° &lt;br&gt;Longitude is ' + longitude + '°&lt;/p&gt;';
    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=20&amp;size=300x300&amp;sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "&lt;p&gt;Locating...&lt;/p&gt;";
  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); });
&lt;/script&gt;

&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Locate&lt;/button&gt;&lt;/p&gt;
&lt;div id="show"&gt;&lt;/div&gt;

 &lt;?php if(isset($_POST['sub'])){ $lat = $_post['lat']; $lat = $_post['long']; echo $lat; } ?&gt;

 &lt;form method="post" action="#"&gt;
 &lt;input id="latitude" name="lat"&gt;
  &lt;input id="latitude" name="long"&gt;
  &lt;input type="submit" name="sub" value="sub"&gt;
     &lt;/form&gt;
</code></pre>

<p>--- UPDATED ---</p>

<pre><code>&lt;script&gt;
    function geoFindMe() {
     var output = document.getElementById("show");

  if (!navigator.geolocation){
    output.innerHTML = "&lt;p&gt;Geolocation is not supported by your browser&lt;/p&gt;";
    return;
  }

  function success(position) {
    latitude  = position.coords.latitude;
    longitude = position.coords.longitude;

    output.innerHTML = '&lt;p&gt;Latitude is ' + latitude + '° &lt;br&gt;Longitude is ' + longitude + '°&lt;/p&gt;';
    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&amp;zoom=20&amp;size=300x300&amp;sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "&lt;p&gt;Locating...&lt;/p&gt;";
  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); });
&lt;/script&gt;

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

 }
  ?&gt;

&lt;p&gt;&lt;button onclick="geoFindMe()"&gt;Locate&lt;/button&gt;&lt;/p&gt;
&lt;div id="show"&gt;&lt;/div&gt;


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

<p>Has been editied by adding ---UPDATED--</p>

<p>Thank you in advance :)</p>