通过PHP形式传递JavaScript和PHP变量

Question

一直在寻找一整天，找到的项目相似，但完全被卡住......

我想谷歌地图自动完成结果（经纬度）传递到一个PHP形式通过PHP变量一起一个提交（未两个按钮，即，把变量JS中隐藏的字段然后经由提交按钮提交表格）

代码目前：

<?php  

if (isset($_POST['submit'])) {  
    // echo vars if they are working... 
    echo "passed data <br>"; 
    echo $_POST['first_name'] . "<br>"; 
    echo $_POST['geocode'] . "<br>";  

    // Get variables, check data and store into DB...  
}  

?> 

然后：

<script type="text/javascript"> 

    var geocoder; 

    function initialize() { 

    // Search options 
    var searchOptions = { 
     componentRestrictions : {country: 'nz'}, 
     types: ['geocode'] 
    }; 

    var input = document.getElementById('pac-input'); 

    var autocomplete = new google.maps.places.Autocomplete(input, searchOptions); 

    geocoder = new google.maps.Geocoder(); 

    } 

    function codeAddress() { 

    var address = document.getElementById('pac-input').value; 

    geocoder.geocode({ 'address': address}, function(results, status) {  
     if (status == google.maps.GeocoderStatus.OK) {   
     document.getElementById('geocode').value = (results[0].geometry.location);    
     } else { 
     //alert('Geocode was not successful for the following reason: ' + status); 
     } 

    }); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

    function submitthis() { 

    codeAddress(); 

    } 

    </script> 

    <script> 

    $(function(){ // Document Ready 

    }); 

    </script> 

最后：

<form id="myForm" name="myForm" action="google-text-input.php" method="post" > 

    First Name<input name="first_name" type="text"><br> 

    Address<input id="pac-input" class="controls" type="text" placeholder="Search Box"><br> 



    <input id="geocode" name="geocode" type="text" value="null"><br> <!-- to be hidden --> 

    <input name="submit" type="submit" value="Submit" onclick="submitthis()"><br> 


    </form> 

我最好喜欢当我打提交按钮，它存储了谷歌地图造成成隐藏的，提交表单相同的页面，然后我可以把所有的PHP VAR和商店。我接受一个提交的方法，将javascript部分放入url中，在那里我可以通过POST获取PHP变量，然后在URL中获取Google Result。

我可以看到哪些不在以上工作的唯一的形式获取提交之前我的codeAddress（）已完成。就好像我把返回false以防止表单提交它更新我的隐藏字段。

在此先感谢！

Answer 1

说实话，我对Google的Geocoding api并不是很熟悉，但是有几种方法可以做到这一点。

第一种方法表单内

追加隐藏输入元素。这可能与您在问题中描述的最接近。

下面是一个简单的形式：

<form name="testForm" action="test.php" 
    method="post" onSubmit="return doSubmit();"> 
    <input type="submit" name="submit" /> 
</form> 

添加return doSubmit();意味着你可以调用该函数，并取消发送的形式，如果你需要。

这里是伴随的javascript：

function doSubmit() { 
    var latval = 42; // Use the geolocation values you want here. 
    var lat = document.createElement("input"); 
    lat.setAttribute("type", "hidden"); 
    lat.setAttribute("value", latval); 
    lat.setAttribute("name", "geo[lat]"); 
    document.forms["testForm"].appendChild(lat); 
    return true; 
    //Note: to stop the form from submitting, you can just return false. 
} 

如果使用jQuery，这变得更加容易。您不需要将onSubmit字段添加到表单。只需为提交按钮分配一个唯一的名称或ID。

$(document.ready(function() { 
    $("input[name=submit]").click(function(e) { 
     var latVal = 42; // Get geo vals here. 
     $("form[name=testForm]").appendChild(
      "<input type='hidden' name='geo[lat]' value='" + latVal + "' />" 
     ); 
    }); 

}）;

下面是一个简单的测试php文件：

//test.php 
<?php 

if (isset($_POST["geo"])) { 
    echo "LAT IS: ".$_POST["geo"]["lat"]; 
} 
?> 

当你按一下按钮，它会追加一个隐藏的输入到表格，并发送与POST数据的其余一起。您可以指定数组类型值来形成名称，并将其转换为PHP $_POST数组中的数组。

当您单击按钮时，此示例将打印“LAT IS：42”。

第二种方法

这是最好的一个。使用AJAX和JSON使用jQuery（阿贾克斯可以用原始的JavaScript来实现，但它isn't fun

对于这一点，我将用一个简单的形式，并添加一个div：

<form name="testForm"> 
    <input type="submit" name="submit" /> 
</form> 
<div id="output"></div> 

的PHP只是回声$_POST["geo"]["lat"] 。

这里是JavaScript：

$(document).ready(function() { 
    $("form[name=testForm]").submit(function (e) { 
     // Prevent form from submitting. 
     e.preventDefault(); 
     // Create a js object. 
     var jso = {}; 
     // Add a geo object. 
     jso['geo'] = {}; 
     // Define its lat value. 
     jso['geo']['lat'] = 42; 
     // Add all other values you want to POST in the method. 
     // You can also just do jso.lat = 42, then change the php accordingly. 
     // Send the ajax query. 
     $.ajax({ 
      url: 'test.php', 
      type: 'POST', 
      data: jso, 
      success: function(data, status) { 
       $("#output").html("<p>" + data + "</p>"); 
      } 
     }); 
    }); 
}); 

概括地说，这是阿贾克斯多么容易被按一下这个例子将设置日提交按钮。 e的html到42.