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

Question

I have a submit button on a form that says this:

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

Two hidden input fields like this:

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

The script looks like this:

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

on the php post:

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

I want the JS function to fill out the value of the long and lat fields BEFORE the form submits; then on the php post I want to grab the input field -- but it returns blank. Is there a typo a problem with logic?

Note: I confirmed the address is being logged in the JS console correctly.

EDIT: I am actually getting a DB query fail error but it SEEMS the result of that is blank long lat entries. These coordinates are being put into a DB.

Answer 1

Google API maps is async, so before it has finished you have submited form. Do it on server or try with Observer.

edit

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
}