jQuery：在提交表單之前執行一些操作

Question

我有一個頁面，上面有一個表單。 該表單包含一個文本框和一個提交按鈕。

提交表單后，通過單擊按鈕或在文本框中按 Enter 鍵，我想進行查找（在這種情況下，使用 Bing 地圖對郵政編碼進行地理編碼），然后像往常一樣將表單提交到服務器.

我目前的方法是將提交事件的處理程序添加到唯一的表單，然后在我完成后調用 submit() ，但我無法讓它工作，也無法調試問題：

$(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()是你的朋友。 您基本上遇到了與此處相同的問題。 在實際的 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();
                }
            });
        });
    });

但是，當您將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();
                }
            });
          }
        });
    });