Question

我想知道为什么我的代码片段没有像我期望的那样工作..

$( "#FormWithAddress" ).submit(function(e) {
        // Check if componentForm is filled if not, get addressAutocomplete input and use geocode
        // if return false; or e.preventDefault; is here, the form can't be submitted
        if( $('#geo_longitude').val().length === 0 || $('#geo_latitude').val().length === 0) {
            var searchValue = $("#addressAutocomplete").val();

            geocoder.geocode( { 'address': searchValue}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //results[0].geometry.location
                    fillInputForm(results[0], results[0].geometry.location.lat(), results[0].geometry.location.lng());
                } else {
                    if ($("#addressAutocomplete").parent().find( ".error-message" ).length == 0) {
                        $("#addressAutocomplete").parent().append("<div class='error-message'>Error message here...</div>");
                    }
                    alert('reached');
                    // if return false; or e.preventDefault; is here, form always get submitted but alert is shown.

                }
            });
        }

    });

请参阅评论：如果第一行中有return false;或e.preventDefault();，则表示所有表格均未提交。如果return false或e.preventDefault处于其他情况，则会显示警报并提交表单。我做错了什么？非常感谢..

Answer 1

geocode方法是异步的，在geocode触发回调时阻止表单提交已经太晚了。

您必须始终阻止提交，然后只需在异步回调中提交表单

$("#FormWithAddress").submit(function (e) {

    e.preventDefault();

    if ($('#geo_longitude').val().length === 0 || $('#geo_latitude').val().length === 0) {
        var searchValue = $("#addressAutocomplete").val(),
            form = this;

        geocoder.geocode({
            'address': searchValue
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //results[0].geometry.location
                fillInputForm(results[0], results[0].geometry.location.lat(), results[0].geometry.location.lng());

                form.submit();

            } else {

                if ($("#addressAutocomplete").parent().find(".error-message").length == 0) {
                    $("#addressAutocomplete").parent().append("<div class='error-message'>Error message here...</div>");
                }

                alert('reached');
            }
        });
    }

});

Answer 2

geocoder.geocode接受第二个参数，它是一个函数。此功能有自己的范围，因此当您返回时，您没有从表单提交中返回，而是从地理编码器返回。

如果你想从地理编码器回调函数中提交for提交内容，你可以随时取消表单提交吗？

jquery防止表单传输无法正常工作

2 个答案: