在php提交之前使用JavaScript填写隐藏的输入

Question

我在表单上有一个提交按钮，上面写着：

<input type="submit" name="add_submit" onclick="return getCoord()" value="Add Location" />

两个隐藏的输入字段，如下所示：

<input id="long" name="long" type="hidden"  value=""  />
<input id="lat" name="lat" type="hidden"  value="" />

脚本如下所示：

<script type="text/javascript">
    function getCoord() {

        address = document.getElementById('street').value + " " + document.getElementById('city').value + " " + document.getElementById('state').value + " " + document.getElementById('zip').value;
        console.log(address);
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode( { 'address': address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();

                document.getElementById('lat').value = latitude;
                document.getElementById('long').value = longitude;


            } 
        });

    } 
</script>

在php帖子：

        $new_long = $database -> escape_value($_POST['long']);
        $new_lat = $database -> escape_value($_POST['lat']);

我希望JS函数在表单提交之前填写long和lat字段的值;然后在php帖子上我想获取输入字段 - 但它返回空白。是否存在拼写错误的逻辑问题？

注意：我确认正确地在JS控制台中记录了该地址。

编辑：我实际上是在收到数据库查询失败错误，但它看到的结果是空白long lat条目。这些坐标被放入DB中。

Answer 1

Google API地图是异步的，因此在完成之前您已提交表单。在服务器上执行或尝试使用Observer。

修改

var geoCompleted = false;

function getCoord() {

    address = document.getElementById('street').value + " " + document.getElementById('city').value + " " + document.getElementById('state').value + " " + document.getElementById('zip').value;
    console.log(address);
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();

            document.getElementById('lat').value = latitude;
            document.getElementById('long').value = longitude;
            geoCompleted = true
            $('#form-id').submit();

        } 
    });
   return geoCompleted
}