Javascript GPSコードからDBに挿入

Question

私は私のフォームに個別に実装する必要があるGPSスクリプトを持っています。

しかし、フォームで実装する前に、データベースの "long"と "lat"という2つのフィールドに緯度と経度を別々に挿入する方法を調べる必要があります。

私はそれらを2つのdivに分けることができましたが、それでも私のデータベースには取り込めません。

彼は完全なGPSページのコードです ：

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

を追加することにより、editiedされています

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

ありがとうございました事前に:)

Answer 1

これを確認してください： send javaScript variable to php variable

2つのパラメータをとり、そのデータをデータベースに挿入してそのページを呼び出す新しいPHPファイルを作成することができます。

ので、ここでのPHPファイルがなければならない方法は次のとおりです。

$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; 
} 

彼は彼の場所を設定するとき、あなたは、クライアントのブラウザから使用してこのファイルを呼び出す必要があります。 、ここでは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> 

が、これはあなたのお役に立てば幸い！