在Jquery中如何在提交之前使用回调运行代码

我需要在提交表单之前运行一些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”事件并手动提交，那么代码正确执行但提交不会触发表单后面的代码。

我认为我接近这个工作，但我找不到运行代码，处理回调值然后正确提交表单的魔术组合，以便执行后面的代码。

Answer 1

您应该在表单上使用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(); } }); } }); 

Answer 2

只是：

1. 调用回调函数。
2. 当用户抛出提交时返回false（即不提交）。
3. 在回调结束时，放置一个使用触发器function进行提交的代码

快速示例代码：

 $('elem').click(function{ callback(); return false; }) 

在callback()你应该提交表格。 执行转换时，这也是一种很好的做法。

编辑回答你的评论为了完整起见，我将为我的答案提供完整的例子。 请考虑我的答案不需要进一步的变量，如Guffa所建议的那样 。

你可以在这里查看 ，下面是代码：

 $('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; }); 

最后，考虑普通用户将执行以下操作：

1. 用户单击“提交”按钮
2. 用户希望看到后续页面，而客户端正在等待回调完成。
3. 因此，不耐烦的用户将再次点击发送按钮。

因此，我还建议在用户触发“click”事件后禁用提交按钮。

最后，我建议始终使用return false而不是preventDefault()来停止这样的事件传播，请在此处阅读原因。

Answer 3

我想出了一个可能更简单的解决方案来避免Guffa的初始提交循环。

一旦回调结束 ，只需解除绑定 （使用unbind（）或off（））提交处理程序， 然后提交表单。 循环被打破;）

Answer 4

这可能违反了一些任意的标准可接受的做法，但我只是通过输入键阻止表单提交，如下所示：

 $('form').bind("keyup keypress", function(e) { var pressedKey = e.keyCode || e.which; if (pressedKey == 13) { e.preventDefault(); return false; } }); 

然后我会设置实际的提交按钮以显示：none并使用元素来使用Guffa建议的.click（）来解决问题中的原始代码。 在没有无关的User / Callback条件逻辑的情况下完成交易。

 $("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(); } }); });