Question

我写了一个小代码片段：

HTML：

<label for="searchTextField">Please Insert an address:</label>
<br>
<form id = "formId" action="google.com">
    <input id="searchTextField" type="text" size="50">
    <input type="submit" value="is valid" id="submitId">
<form>

JS：

var input = document.getElementById('searchTextField');
var options = {componentRestrictions: {country: 'us'}};

new google.maps.places.Autocomplete(input, options);
$("#formId").submit(function(e){
    return editTerminal(e);
});
function editTerminal(id, e) {
            function setPosition(){
                console.log("logic");            
            };
            return codeEditAddress(setPosition,e);
}      

 function codeEditAddress( callback, e) {
        var address = document.getElementById('searchTextField').value;
        var geocoder= new google.maps.Geocoder();
        geocoder.geocode({ 'address': address}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //should be submit
                alert('good address');
            } else {
                //should NOT be submit
                alert('wrong address');
                e.preventDefault();

            }
    });
 }

jsfiddle DEMO

现在我的表格提交了。如果显示wrong address消息，我想实现它不提交。

请帮助修改代码。

Answer 1

而不是调用你的函数

$("#formId").submit(function(e){
return editTerminal(e); });

在表单提交上，您应该通过按钮替换您的提交输入，并在其onclick事件上启动您的功能。然后，如果地址有效，请手动提交表单：

$("#formId").submit();

S.P

Answer 2

您的地理编码功能是异步的。您在其中执行的任何操作都不会影响事件处理。

我总是会为提交事件返回false

$("#formId").submit(function(e){
    editTerminal(e);
    return false;
});

做一个纯粹的js表单提交一个好地址绕过提交监听器：

document.myForm.submit();

http://jsfiddle.net/6pmou2zx/1

如果未通过验证，如何提交表格

jsfiddle DEMO

2 个答案: