jQuery added post variables are not sent to the server

Question

I use a before submit hook in order to run some javascript before the submit. Therefore I use the following code:

jQuery(function() {
    jQuery('#setup-form').submit(function(e) {
        codeAddress();
        return true;
    });
});

The function codeAddress() fills two hidden input fields with data. The data is actually filled (into the value attribute). But on the server's side there is no data arriving. What is the problem here?

FYI:

function codeAddress() {
    var address = document.getElementById('address').value;
    if(address){
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var location2 = '' + location;
                location2 = location2.slice(1, location2.length - 1).split(', ');
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);

                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
}

Answer 1

I think the problem is the form is submitted before the value is set in hidden field. What you can do is put your function code inside submit block and put return true after setting up the hidden field so your hidden field will be set before submission.

Try this

jQuery(function() {
jQuery('#setup-form').submit(function(e) {
    var address = document.getElementById('address').value;
    var isHiddenFieldSet=0;//0 indicates hidden field value is not set
    if(address){
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var location2 = '' + location;
                location2 = location2.slice(1, location2.length - 1).split(', ');
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);

                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });
                isHiddenFieldSet=1;//Set value to 1 to indicate hidden field value is set
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }
    if(isHiddenFieldSet){//Submit the form only if hidden field value is set
          return true;
    } else {
         return false;
    }
    });
 });

Answer 2

As Ravi Thakkar's and mry's answers do not work (I commented the reason) I suggest my own solution but it is based on your ideas:

function codeAddress(submit) {
    var address = document.getElementById('address').value;
    if(address){
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var location2 = '' + location;
                location2 = location2.slice(1, location2.length - 1).split(', ');
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);

                map.setCenter(location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: location
                });

                if(submit) jQuery('#setup-form').submit();
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    } else {
        if(submit) jQuery('#setup-form').submit();
    }
}

Therefore it is nescessary to change the submit button in html to this:

<button type="button" class="btn btn-success btn-lg" onclick="codeAddress(true)">Submit</button>

Answer 3

Call your codeAddress function first and then from inside that function call your submit after you set values. like this

function codeAddress() {
    var address = document.getElementById('address').value;
    if(address){
                .
                .
                .
                jQuery('#geo-lat').attr('value', location2[0]);
                jQuery('#geo-long').attr('value', location2[1]);
                jQuery('#setup-form').submit();
             ...
}