我需要在提交表单之前运行一些jquery代码,而且似乎存在一些问题。
在你急于推荐之前,请听我说:
$(function() {
$('form').submit( function() {
/* some code */
return true;
});
});
我需要在按下“提交”按钮后首先使用谷歌API计算地址的经度和纬度变量,然后提交表格。这需要在回调函数中监听响应。
到目前为止我的代码看起来像这样:
$("form input:submit").click(function(e){
e.preventDefault();
var address = $(this).find('.address').val();
geocoder.geocode( { 'address': unescape(address)}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$(".latSelector input:hidden").val(results[0].geometry.location.lat());
$(".lngSelector input:hidden").val(results[0].geometry.location.lng());
$("form").submit();
}
});
});
如果我使用“submit”函数执行相同的操作,则表单会在触发回调函数之前提交,并且后面的代码会以缺少的值执行。
如果我在按钮上使用“click”事件(如上面的代码并手动提交),则代码会正确执行,但提交不会触发表单后面的代码。
我认为我接近于让它工作但我无法找到运行代码的神奇组合,处理回调值然后正确提交表单,以便执行后面的代码。
答案 0 :(得分:12)
您应该在表单上使用submit
事件,而不是按钮的click
事件。有些浏览器允许在不使用提交按钮的情况下提交表单,只需在表单中的某个字段具有焦点时按Enter即可。
preventDefault
方法将停止提交表单,以便您以后提交:
$("form").submit(function(e){
e.preventDefault();
var address = $(this).find('.address').val();
geocoder.geocode( { 'address': unescape(address)}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$(".latSelector input:hidden").val(results[0].geometry.location.lat());
$(".lngSelector input:hidden").val(results[0].geometry.location.lng());
$("form")[0].submit();
}
});
});
要使用按钮提交表单,您需要跟踪表单提交的原因:
var reason = 'user';
$("form").submit(function(e){
if (reason == 'user') {
e.preventDefault();
var address = $(this).find('.address').val();
geocoder.geocode( { 'address': unescape(address)}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$(".latSelector input:hidden").val(results[0].geometry.location.lat());
$(".lngSelector input:hidden").val(results[0].geometry.location.lng());
reason = 'callback';
$("form input:submit").click();
}
});
}
});
答案 1 :(得分:2)
简单地说:
快速示例代码:
$('elem').click(function{
callback();
return false;
})
并在callback()
中提交表单。
执行转换时,这也是一种很好的做法。
编辑回复您的评论 为了完整起见,我将为我的答案提供完整的例子。 请考虑Guffa建议,我的答案不需要进一步的变量。
您可以查看here,然后按照以下代码进行检查:
$('input[type="submit"]').click(function(e){
var address = 'London, UK';
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': unescape(address)}, function(results, status){
if (status == google.maps.GeocoderStatus.OK)
{
$(".latSelector input:hidden").val(results[0].geometry.location.lat());
$(".lngSelector input:hidden").val(results[0].geometry.location.lng());
alert("DATA TAKEN BEFORE TO SUBMIT");
$('form').submit();
}
});
return false;
});
最后,请考虑普通用户将如下操作:
因此,我还建议在用户触发“点击”事件后禁用提交按钮。
最后,我建议始终使用return false
代替preventDefault()
来阻止此类事件传播,请阅读here原因。
答案 2 :(得分:1)
我想出了一个更简单的解决方案来避免Guffa的初始提交循环。
一旦回调结束,只需取消绑定(使用unbind()或off())提交处理程序和然后执行提交表单。循环被打破;)
答案 3 :(得分:0)
这可能违反了一些任意标准的可接受做法,但我只是通过输入键阻止表单提交,如下所示:
$('form').bind("keyup keypress", function(e) {
var pressedKey = e.keyCode || e.which;
if (pressedKey == 13) {
e.preventDefault();
return false;
}
});
然后我会设置实际的提交按钮以显示:none并使用元素来使用Guffa建议的.click()来解决问题中的原始代码。在没有无关的用户/回调条件逻辑的情况下完成交易。
$("button#Submit").click(function(){
var address = $("form").find('.address').val();
geocoder.geocode( { 'address': unescape(address)}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$(".latSelector input:hidden").val(results[0].geometry.location.lat());
$(".lngSelector input:hidden").val(results[0].geometry.location.lng());
$("form input:submit").click();
}
});
});