我有这个代码在提交表单时触发：
$("form").submit(function (e) {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("Address").value;
geocoder.geocode({ 'address': address },function (results,status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#LatitudeLongitude").val(results[0].geometry.location);
$("form").submit();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
$('form').unbind('submit');
return false;
});
它的作用：它调用谷歌地理编码服务将地址转换为纬度/经度,该纬度/经度被设置为表格的隐藏字段.如果有结果,则提交表单.
问题是如果验证失败(例如,尚未设置必填字段),则仍会进行地理编码调用.此外,如果我再次单击提交按钮,即使尚未设置必填字段,也会发布表单.
如果不引人注目的验证成功,我该如何调用地理编码服务？
解决方法
您需要捕获先前的事件,并控制如何继续,而不是附加到submit()事件.
首先,假设您的原始按钮具有提交ID,并创建一个id为startSubmit的新提交按钮.然后,通过设置HTML属性display =“false”隐藏原始提交按钮.接下来,绑定到新按钮的click事件,并添加您的代码,如下所示：
$("#startSubmit").live("click",function() {
// check if the form is valid
if ($("form").validate().form()) {
// valid,proceed with geocoding
var geocoder = new google.maps.Geocoder();
var address = $("#Address").val();
geocoder.geocode({ 'address': address },status) {
if (status == google.maps.GeocoderStatus.OK) {
$("#LatitudeLongitude").val(results[0].geometry.location);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
// proceed to submit form
$("#submit").click();
}
}
return false;
});
这将调用验证,因此只有在表单有效时才会发生地理编码,然后,在地理编码返回响应后,它将通过在提交按钮上触发click事件来提交表单.
