jQuery：在提交表单之前执行一些操作 [英] jQuery: performing some action before form is submitted

问题描述

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

I have a page with a single form on it. The form contains a text box and a submit button.

提交表单时，通过单击按钮，或在文本框中按Enter，我想要做查找（在这种情况下，使用Bing Maps对邮政编码进行地理编码），然后像往常一样将表单提交到服务器。

When the form is submitted, either by clicking the button, or by pressing enter in the textbox, I want to do a lookup (in this case, geocoding a postcode using Bing Maps), and then submit the form to the server, as usual.

我当前的方法是添加处理程序将提交事件提交给一个唯一的表单，然后在我完成时调用submit（），但是我无法使其工作，并且无法调试问题：

My current approach is to add a handler for the submit event to the one-and-only form, and then call submit() when I've finished, but I can't get this to work, and haven't been able to debug the problem:

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

推荐答案

event.preventDefault（） 是你的朋友。您基本上遇到的问题与此处。在实际的ajax请求完成之前提交表单。您需要暂停表单提交，然后执行ajax，然后执行表单提交。如果你没有在那里设置一些止损，那么它只会贯穿它，它唯一要做的就是提交表格。

event.preventDefault() is your friend here. You are basically experiencing the same problem as here. The form is submitted before the actual ajax request can be done. You need to halt the form submission, then do the ajax, and then do the form submission. If you don't put some stops in there, it'll just run through it and the only thing it'll have time to do is to submit the form.

 $(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 定义条件。

Howevern, when you put the preventDefault in there you can't continue the form submission with $('form').submit(); anymore. You need to send it as an ajax request, or define a conditional to the 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();
                }
            });
          }
        });
    });

这篇关于jQuery：在提交表单之前执行一些操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！