4

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

如果我使用“提交”函数执行相同的操作，表单会在触发回调函数之前提交，并且后面的代码会以缺失值执行。

如果我像上面的代码一样在按钮上使用“click”事件并手动提交，那么代码会正确执行，但提交不会触发表单后面的代码。

我想我已经接近让它工作了，但我找不到可以运行代码、处理回调值然后正确提交表单的神奇组合，以便执行后面的代码。

4

4 回答 4

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();
      }
    });
  }
});
于 2013-01-09T16:53:05.047 回答
2

简单地：

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

快速示例代码：

$('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. 所以，不耐烦的用户会再次点击发送按钮。

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

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

于 2013-01-09T16:42:34.653 回答
1

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

一旦回调结束，只需取消绑定（使用 unbind() 或 off()）提交处理程序，然后提交表单。循环坏了；）

于 2013-05-05T21:20:00.233 回答
0

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

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

然后我会将实际的提交按钮设置为 display: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();
          }
       });  
  });
于 2014-04-29T20:47:42.927 回答