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