Jquery - 未提交表单答案

【问题标题】：Jquery - Form not being submittedJquery - 未提交表单
【发布时间】：2013-05-11 02:40:18
【问题描述】：

我有一些代码，当单击搜索框时，会在位置框中对位置进行地理编码（除非自动建议已完成）并提交表单。

问题是，点击 searhc 按钮并且地理编码成功后，表单没有提交。谁能告诉我哪里出错了？

这是 jsfiddle 的链接：http://jsfiddle.net/sR4GR/35/

这是完整的代码：

$(function () { 

    var input = $("#loc"),
        lat = $("#lat"),
        lng = $("#lng"),
        lastQuery = null,
        autocomplete;

    function processLocation(query) {
        var query = $.trim(input.val()),
            geocoder;

        if (!query || query == lastQuery) {
            console.log("Empty or same variable");
            return;
        }

        lastQuery = query;

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            address: query
        }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                lat.val(results[0].geometry.location.lat());
                lng.val(results[0].geometry.location.lng());
            } else {
                alert("We couldn't find this location. Please try an alternative");
            }
        });
    }

    autocomplete = new google.maps.places.Autocomplete(input[0], {
        types: ["geocode"],
        componentRestrictions: {
            country: "uk"
        }
    });

    google.maps.event.addListener(autocomplete, 'place_changed', processLocation);

    $('#searchform').on('submit', function (event) {
        processLocation();
        event.preventDefault();
    });
});

【问题讨论】：

event.preventDefault(); 可能是问题
我也这么认为，但我需要它来阻止在没有首先对位置进行地理编码的情况下提交表单：s
您不能对文本字段的更改事件运行 processLocation() 并在值有效之前禁用提交按钮吗？

标签： javascript jquery performance

【解决方案1】：

我不知道processLocation(query) 对query 的期望是什么，但想法是这样的：
1.更改函数签名

function processLocation(query, doSubmit) { // <--- new parameter
    var query = $.trim(input.val()),
        geocoder;

    if (!query || query == lastQuery) {
        console.log("Empty or same variable");
        return;
    }

    lastQuery = query;

    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        address: query
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            lat.val(results[0].geometry.location.lat());
            lng.val(results[0].geometry.location.lng());
            if (doSubmit){
                 $('#searchform').submit(); //<-- new param usage
            }
        } else {
            alert("We couldn't find this location. Please try an alternative");
        }
    });
}

2.删除这个电话

$('#searchform').on('submit', function (event) {
    alert('Submitted')
    event.preventDefault(); 
});

3.添加这个调用

$('#search').click(function(){
     processLocation(new Date(), true); //<-- don't know what's the first param
});

尝试在您的 jsfiddle 中玩耍，但没有成功，因为我不断将 Empty or same variable 消息输入控制台。我想你更了解你的逻辑，你会弄明白的

【讨论】：

【解决方案2】：

我只会禁用提交按钮，直到值有效？

<input type="submit" value="Search" id="search" disabled="disabled">

search.removeAttr('disabled')

http://jsfiddle.net/sR4GR/38/

【讨论】：

嗨 Stefan，这样的事情可能会奏效，但从可用性的角度来看，它并不是很好，尤其是因为它不是必填字段。