将变量从html传递到javascript到php

时间:2015-04-07 13:42:10

标签: javascript php html database geocoding

我试图对用户提交的地址进行地理编码并将其存储到数据库中。该表单调用一个php文件,其中javascript检索地址并对其进行地理编码。然后将lat和lng值传递给php并存储在数据库中,但数据库中唯一的值是零。

HTML文件:

 <html>
  <body>
    <form action="registerEvent.php" id="form" method="post">       
        <input id="address" name="address" placeholder="Adrese" type="text">                    
        <button type="submit" id="submit">Send</button>             
    </form>
  </body>
</html>

registerEvent.php:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var inputLat;
var inputLng;

function codeAddress() {

    geocoder = new google.maps.Geocoder();

  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

    var inputLat = event.latLng.lat(); 
    var inputLng = event.latLng.lng();    

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}

function passvariable() { 
  window.location.href = "registerEvent.php?lat=" + inputLat;
  window.location.href = "registerEvent.php?lng=" + inputLng; 
}

    codeAddress();
    passvariable();

</script>



<?php
    require("dbinfo.php");

    $connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

    $lat =$_GET['inputLat']; 
    $lng =$_GET['inputLng']; 

    $sql = "INSERT INTO sometable (lat, lng)
VALUES ('$lat', '$lng')";

    if (!mysqli_query($connection,$sql)) {
      die('Error: ' . mysqli_error($connection));
    };

    mysqli_close($connection);
?>

4 个答案:

答案 0 :(得分:1)

您正在调用window.location.href两次,并且PHP部分中的变量似乎不正确($_GET['inputLat']而不是lat$_GET['inputLong']而不是lon)< / p>

如果HTML文件是单独的文件,那么您需要以不同的方式获取地址: 取代

var address = document.getElementById('address').value;

var address = "<?php echo $_POST['address']; ?>"

JS函数看起来应该更像

<script src="https://maps.googleapis.com/maps/api/jsv=3.exp&signed_in=true">
</script>
<script> 
var geocoder;
var inputLat;
var inputLng; 

function codeAddress() {
  geocoder = new google.maps.Geocoder();
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var inputLat = event.latLng.lat(); 
    var inputLng = event.latLng.lng();    
    window.location.href = "registerEvent.php?lat=" + inputLat + "&lng=" + inputLng;
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}
codeAddress();
</script>

PHP部分:

    // ...
    $lat =$_GET['lat']; 
    $lng =$_GET['lng']; 

    if (!empty($lat) && !empty($lng)) {    
       $sql = "INSERT INTO sometable (lat, lng) VALUES ('$lat', '$lng')";
       if (!mysqli_query($connection,$sql)) {
         die('Error: ' . mysqli_error($connection));
       };
    }

    mysqli_close($connection);

如果所有内容都在同一个文件中,则表单按钮应更改为:

<button type="button" id="submit" onclick="codeAddress()">Send</button>    

答案 1 :(得分:0)

在您的代码中,表单会对PHP页面执行POST,但您只发布地址字段,而不会从google api获取任何协调。

另外,您调用的API提供了一个复杂的返回类型,您应该检查它...要获得lat和lng,您必须从数组中选择一个元素并检查geometry.location中的内容。 (你可以查看:https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult

所以,首先,在发布表单之前,先进行ajax调用以获取coords。

只需添加onsubmit="return codeAddress();",然后在codeAddress函数中添加return false;以防止默认操作(阻止提交表单本身),并通过GET将数据发送到registerEvent.php,使用类似这样的函数。

在您的HTML中:

<html>
  <head>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
     <script type="text/javascript">
        function codeAddress() {
           var geocoder = new google.maps.Geocoder();
           var address = document.getElementById('address').value;
           geocoder.geocode( { 'address': address}, function(results, status) {
             if (status == google.maps.GeocoderStatus.OK) {
               var inputLat = results[0].geometry.location.lat(); 
               var inputLng = results[0].geometry.location.lng();    
               window.location.href = "registerEvent.php?inputLat=" + inputLat + "&inputLng=" + inputLng;
             } else {
               alert('Geocode was not successful for the following reason: ' + status);
             }
           });
           return false;
        }
     </script>
  </head>
  <body>
    <form action="registerEvent.php" id="form" method="post" onsubmit="return codeAddress()">       
       <input id="address" name="address" placeholder="Adrese" type="text">                    
       <button type="submit" id="submit">Send</button>             
    </form>
  </body>
</html>

在你的PHP中:

<?php
require("dbinfo.php");
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
    die('Not connected : ' . mysql_error());
}
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
    die ('Can\'t use db : ' . mysql_error());
}
$lat =$_GET['inputLat']; 
$lng =$_GET['inputLng']; 
$sql = "INSERT INTO sometable (lat, lng) VALUES ('$lat', '$lng')";
if (!mysqli_query($connection,$sql)) {
    die('Error: ' . mysqli_error($connection));
};
mysqli_close($connection);
?>

答案 2 :(得分:-1)

一次,使用这个片段从地址获取lat / lng,所有这些都在PHP(旧API)中:

$address = "......";
$json = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=".urlencode($address));
$json = json_decode($json);

if ($json->status == "OK")
    return $json->results[0]->geometry->location;

答案 3 :(得分:-1)

javascript正在寻找值

var address = document.getElementById('address').value;
在html输入中

并且没有值:

<input id="address" name="address" placeholder="Adrese" type="text">