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

时间:2013-01-09 16:39:40

标签: jquery events callback click submit

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

我认为我接近于让它工作但我无法找到运行代码的神奇组合,处理回调值然后正确提交表单,以便执行后面的代码。

4 个答案:

答案 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)

简单地说:

  1. 调用回调函数。
  2. 在用户抛出提交时返回false(即不提交)。
  3. 在回调结束时,将使用trigger函数
  4. 执行提交的代码放入

    快速示例代码:

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

    最后,请考虑普通用户将如下操作:

    1. 用户点击提交按钮
    2. 用户希望看到后续页面,而客户端正在等待回调完成。
    3. 因此,不耐烦的用户将再次点击发送按钮。
    4. 因此,我还建议在用户触发“点击”事件后禁用提交按钮。

      最后,我建议始终使用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();
          }
       });  
  });