我的此表单中包含输入地址的输入,填写完表格后,地址应由googlemaps验证是否存在
这是表单HTML代码:
<form class="form-inline" id="Form" method="post" name="Form" onsubmit="event.preventDefault(); formSubmit();">
<div class="form-group">
<input class="form-control customInput" id="fromSearch" onfocus="geolocate()" placeholder="From (Address)" required type="text">
</div>
<input class="btn btn-default nextBtn" type="submit" value="Next →">
和Javascript代码:
function formSubmit() {
var fromSearch = document.getElementById("fromSearch").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': fromSearch}, function(results, status) {
if (status == 'OK') {
document.getElementById("fromSearch").style.borderColor = '#55ff00';
document.getElementById("fromSearch").style.backgroundColor = 'rgb(208, 237, 195)';
document.getElementById("fromSearch").style.color = '#555';
}
else {
document.getElementById("fromSearch").style.borderColor = 'red';
document.getElementById("fromSearch").style.backgroundColor = '#FC8181';
document.getElementById("fromSearch").style.color = 'white';
}
});
return false;
}
Google API脚本:
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $googlemaps_api; ?>&libraries=places&callback=initAutocomplete" async defer></script>
并且Google地图的功能自动完成
function initAutocomplete() {
var geocoder = new google.maps.Geocoder();
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('fromSearch')), {
types: ['address']
});
setAutocompleteCountry();
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("No details available for input: '" + place.name + "'");
return;
}
});
}
提交表单时,它不会验证地址,而只是将样式更改为成功样式,当值从自动填充文本框更改为选定的地址时,它保持不变并且不会#39; t验证它。
我一直在努力解决这个问题并尝试修复它大约4天没有结果,有没有办法将地址验证链接到表单提交。
感谢您的帮助:)。