jQuery:在提交表单之前执行一些操作
问题描述:
我有一个包含单一表单的页面。该表单包含一个文本框和一个提交按钮。jQuery:在提交表单之前执行一些操作
当提交表单时,无论是通过点击按钮,还是按下文本框中的回车键,我想要进行查找(在这种情况下,使用Bing地图对邮编进行地理编码),然后将表单提交给服务器,像往常一样。
我目前的做法是为提交事件添加一个处理程序给唯一的表单,然后在完成时调用submit(),但是我无法让它工作, t能够调试问题:
$(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();
}
});
});
});
答
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();
}
});
});
});
Howevern,当你把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();
}
});
}
});
});
您还需要排除任何代码,您只想跑,你可能会想运行'$ .getJSON(...)在第一时间再次' 。 – devmatt 2011-05-29 11:05:19
非常正确,修改其余的只能在else条件下运行。虽然,它不应该在提交表单上运行ajax,但现在至少它不会尝试去做。 – Niklas 2011-05-29 11:09:03