通過PHP表單傳遞Javascript和PHP變量

Question

整天都在搜索，發現相似但完全卡住的物品...

我想將Google Maps自動完成結果（latlng）與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>

我希望當我單擊“提交”按鈕時，它會將Google Maps結果存儲為隱藏，將表單提交到同一頁面，然后可以拉出所有php vars並存儲。 我願意接受一種方法，提交后將javascript部分放到url中，我可以通過POST提取PHP變量，而只需在URL中獲取Google結果。

我唯一可以看到的在上面無效的是在我的codeAddress（）完成之前提交了表單。 好像我把return 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”。

第二種方法

這是最好的。 在jQuery中使用ajax和json（ajax可以在原始javascript中完成，但這不好玩 ！

為此，我將使用一個更簡單的形式，並添加一個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>"); 
            }
        });
    });
});

簡而言之，這就是ajax的簡易性。 在此示例中，單擊提交按鈕會將div的html設置為42。