通过PHP表单传递Javascript和PHP变量

搜索了一整天，发现了相似但完全卡住的物品

我想通过一个submit而不是两个按钮将Google Maps自动完成结果latlng与PHP变量一起传递到PHP表单中，即将JS变量放入隐藏字段，然后通过submit按钮提交表单

现行守则：

    <?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...    
}    

?>

然后：

最后：

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

我希望当我点击Submit按钮时，它会将Google地图结果存储到hidden中，然后将表单提交到同一页面，这样我就可以提取所有php变量并进行存储。我对一种方法持开放态度，在提交时将javascript部分放入url，在那里我可以通过POST拉取PHP变量，并在url中获得Google结果

我能看到的唯一一件在上面没有用的事情是表单在我的代码地址完成之前被提交。就像我将return设置为false以防止表单提交一样，它会更新我的隐藏字段

---

提前谢谢

老实说，我对谷歌的地理编码api不是很熟悉，但有几种方法可以做到这一点

第一种方法

在表单中附加隐藏的输入元素。这可能是最接近您在问题中描述的内容

以下是一个简化形式：

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

如果使用jQuery，这将变得更容易。您不需要将onSubmit字段添加到表单中。只需为submit按钮指定一个唯一的名称或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只是响应$_POST[geo][lat]

下面是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.
}

$(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>"); 
            }
        });
    });
});

---

简而言之，这就是ajax的易用性。在本例中单击submit按钮将把div的html设置为42。

您使用的是jQuery吗？是的，我可以！我已经考虑过防止地址栏上的ENTER键和地址栏上的onblur来更新我目前显示的隐藏栏位，只是不确定这是否是正确的方法…谢谢Steven，所以使用上面的示例代码可以很好地工作-当我在表单提交下运行Google Maps Geocoder时，单击它不工作，这就好像geocoder函数需要很长时间，并且它在geocoder函数完成处理之前提交表单。我希望这是有意义的，我很想明天试一试AJAX方法，看看它是如何工作的。@sprintcar78a，看起来当你调用geocoder.geocode时，第二个参数是一个在你得到结果后运行的函数。在geocoder.geocode回调函数中执行ajax请求，您应该能够从那里将结果添加到ajax查询中。我需要一个触发器来运行该函数。如果您键入一个地址，它会自动完成&用户点击ENTER键，它会提交表单，以便geocode函数。没有被处理或处理得太慢&页面被提交。我认为我们可能必须阻止表单提交的默认操作&如您所建议的那样，在geocode函数中通过jQuery或Ajax发送表单。另一个解决方法是在地址输入onblur上运行geocode函数，防止ENTER键对该输入起作用。非常感谢您的输入，jQuery很有帮助&我很想熟悉Ajax！

//test.php
<?php

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

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

$(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>"); 
            }
        });
    });
});