我无法调用下面的jquery函数。我没有得到错误但没有任何反应。代码在cakephp3 mvc中,jquery自动包含在其中。要调用的jquery函数根据cakephp3表单元素
中给出的地址计算lat和long <?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>
答案 0 :(得分:1)
删除onclick
-
<input type="button" value="calculate" id="calculate_address_lat_long" />
或
试试这个
<?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="calculate_address_lat_long();" />
<script type="text/javascript">
function calculate_address_lat_long() {
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>