Using JavaScript to fill out hidden input before php submit

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.

Try getting the co-ordinates server side(with a server-side api), or prevent the user from submitting the form until geocode completes. — Musa
– Musa, Commented Aug 5, 2013 at 21:14
@Musa Maybe just an auto JavaScript watcher function that gets coordinates when ALL appropriate fields are filled out? (form can not be submitted until address is complete) — TheLettuceMaster
– TheLettuceMaster, Commented Aug 5, 2013 at 21:15
btw as mentioned onclick won't be invoked always use onsubmit — kwarunek
– kwarunek, Commented Aug 5, 2013 at 21:34
@woofmeow isnt the value being set here? document.getElementById('lat').value = latitude; document.getElementById('long').value = longitude; — TheLettuceMaster
– TheLettuceMaster, Commented Aug 5, 2013 at 22:18

kwarunek · Accepted Answer · 2013-08-05 21:18:28Z

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
}

Collectives™ on Stack Overflow

Using JavaScript to fill out hidden input before php submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related