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

Question

我需要在提交表单之前运行一些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();
      }
    });
  }
});