I am having trouble calling the jQuery function mentioned below in my CakePHP3 MVC project. There are no error messages, but nothing seems to be happening. The code is set up so that jQuery gets included automatically. The function I am trying to call should calculate the latitude and longitude from an address provided in the form elements of the CakePHP3 application.
<?php
echo $this->Form->input('Tutors.address_street');
echo $this->Form->input('Tutors.address_suburb');
echo $this->Form->input('Tutors.address_postcode');
echo $this->Form->input('Tutors.address_state',array('type' => 'select', 'options' => $auStates, 'default' => 'VIC'));
?>
<hr>
<?php
echo $this->Form->input('Tutors.address_lat',["value"=>0]);
echo $this->Form->input('Tutors.address_long',["value"=>0]);
?>
<input type="button" value="calculate" id="calculate_address_lat_long" onClick="$(this).calculate_address_lat_long();" />
/////////////
<script type="text/javascript">
$(document).on('click', '#calculate_address_lat_long', function () {
var address = '';
address += $('#TutorAddressStreet').val();
address += ' ' + $('#TutorAddressSuburb').val();
address += ' ' + $('#TutorAddressPostcode').val();
address += ' ' + $('#TutorAddressState').val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
$('#TutorAddressLat').val(latitude);
$('#TutorAddressLong').val(longitude);
$('#formated_address_lat_long')
.html('<div class="alert alert-success">' + results[0].formatted_address + '</div>')
.fadeTo(100, 0.1).fadeTo(250, 1)
.css({"position": "relative","top": "15px"});
} else {
$('#formated_address_lat_long')
.fadeTo(100, 0.1).fadeTo(250, 1)
.html('<div class="alert alert-error">22Address Not Found</div>')
.css({"position": "relative","top": "15px"});
}
});
});
</script>