我有一个页面,上面有一个表格。表单包含一个文本框和一个提交按钮。
当提交表单时,通过单击按钮或在文本框中按Enter键,我想进行查找(在这种情况下,使用Bing Maps对邮政编码进行地理编码),然后将表单提交到服务器像往常一样。
我目前的做法是将提交事件的处理程序添加到一个唯一的表单中,然后在我完成时调用submit(),但是我无法使其工作,并且没有能够调试问题:
$(document).ready(function () {
$("form").submit(function (event) {
var postcode = $.trim($("#Postcode").val());
if (postcode.length === 0) {
return false;
}
var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/";
var apiKey = "myKey";
var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?";
$.getJSON(url, function (result) {
if (result.resourceSets[0].estimatedTotal > 0) {
var location = result.resourceSets[0].resources[0].point.coordinates;
$("#latitude").val(location[0]);
$("#longitude").val(location[1]);
$("form").submit();
}
});
});
});
答案 0 :(得分:5)
event.preventDefault()
是你的朋友。您基本上遇到与here相同的问题。在实际的ajax请求完成之前提交表单。您需要暂停表单提交,然后执行ajax,然后执行表单提交。如果你没有在那里设置一些停靠点,那么它只会运行它,而且它唯一要做的就是提交表单。
$(document).ready(function () {
$("form").submit(function (event) {
// prevent default form submit
event.preventDefault();
var postcode = $.trim($("#Postcode").val());
if (postcode.length === 0) {
return false;
}
var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/";
var apiKey = "myKey";
var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?";
$.getJSON(url, function (result) {
if (result.resourceSets[0].estimatedTotal > 0) {
var location = result.resourceSets[0].resources[0].point.coordinates;
$("#latitude").val(location[0]);
$("#longitude").val(location[1]);
$("form").submit();
}
});
});
});
然而,当您将preventDefault
放在那里时,您无法继续使用$('form').submit();
提交表单。您需要将其作为ajax请求发送,或者为preventDefault
定义条件。
或许这样的事情:
$(document).ready(function () {
var submitForReal = false;
$("form").submit(function (event) {
var postcode = $.trim($("#Postcode").val());
if (postcode.length === 0) {
return false;
}
// prevent default form submit
if(!submitForReal){
event.preventDefault();
}else{
var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/";
var apiKey = "myKey";
var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?";
$.getJSON(url, function (result) {
if (result.resourceSets[0].estimatedTotal > 0) {
var location = result.resourceSets[0].resources[0].point.coordinates;
$("#latitude").val(location[0]);
$("#longitude").val(location[1]);
submitForReal = true;
$("form").submit();
}
});
}
});
});