jQuery：在提交表单之前执行一些操作

Question

我有一个包含单一表单的页面。该表单包含一个文本框和一个提交按钮。

当提交表单时，无论是通过点击按钮，还是按下文本框中的回车键，我想要进行查找（在这种情况下，使用Bing地图对邮编进行地理编码），然后将表单提交给服务器，像往常一样。

我目前的做法是为提交事件添加一个处理程序给唯一的表单，然后在完成时调用submit（），但是我无法让它工作， t能够调试问题：

$(document).ready(function() { 
    $("form").submit(function (event) { 
     var postcode = $.trim($("#Postcode").val()); 
     if (postcode.length === 0) { 
      return false; 
     } 

     var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/"; 
     var apiKey = "myKey"; 
     var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?"; 
     $.getJSON(url, function (result) { 
      if (result.resourceSets[0].estimatedTotal > 0) { 
       var location = result.resourceSets[0].resources[0].point.coordinates; 
       $("#latitude").val(location[0]); 
       $("#longitude").val(location[1]); 
       $("form").submit(); 
      } 
     }); 
    }); 
}); 

Answer 1

event.preventDefault()是你的朋友在这里。您基本上遇到与here相同的问题。在实际的ajax请求可以完成之前提交表单。您需要暂停表单提交，然后执行ajax，然后执行表单提交。如果你不在那里停留一下，它就会穿过它，它唯一需要做的就是提交表格。

$(document).ready(function() { 
     $("form").submit(function (event) { 

// prevent default form submit 
    event.preventDefault(); 
      var postcode = $.trim($("#Postcode").val()); 
      if (postcode.length === 0) { 
       return false; 
      } 


      var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/"; 
      var apiKey = "myKey"; 
      var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?"; 
      $.getJSON(url, function (result) { 
       if (result.resourceSets[0].estimatedTotal > 0) { 
        var location = result.resourceSets[0].resources[0].point.coordinates; 
        $("#latitude").val(location[0]); 
        $("#longitude").val(location[1]); 
        $("form").submit(); 
       } 
      }); 
     }); 
    }); 

Howevern，当你把preventDefault在那里，你将无法继续表单提交与$('form').submit();了。您需要将它作为ajax请求发送，或者为preventDefault定义一个条件。

像这样的东西可能：

$(document).ready(function() { 

    var submitForReal = false; 
     $("form").submit(function (event) { 

      var postcode = $.trim($("#Postcode").val()); 
      if (postcode.length === 0) { 
       return false; 
      } 
    // prevent default form submit 
    if(!submitForReal){ 
    event.preventDefault(); 
    }else{ 



      var baseUrl = "http://dev.virtualearth.net/REST/v1/Locations/UK/"; 
      var apiKey = "myKey"; 
      var url = baseUrl + postcode + "?key=" + apiKey + "&jsonp=?"; 
      $.getJSON(url, function (result) { 
       if (result.resourceSets[0].estimatedTotal > 0) { 
        var location = result.resourceSets[0].resources[0].point.coordinates; 
        $("#latitude").val(location[0]); 
        $("#longitude").val(location[1]); 
        submitForReal = true; 
        $("form").submit(); 
       } 
      }); 
      } 
     }); 
    });