Question

我使用GoogleMapsAPI帮助用户更快地填写表单。

表单是可选的，因此默认情况下启用提交按钮，只要用户使用API自动填充选择任何地址，我想检查是否填写了postal_code和locality输入，万一它不应该被禁用按钮。

问题是jQuery代码是一个迟到的事件，它会在postal_code和locality更新之前被调用。

当用户选择了一个选项并且两个字段都已填满时，应该启用该按钮。

上的演示

HTML：

<input id="autocomplete" placeholder="Enter your address" type="text">
<input id="postal_code" placeholder="prefill postal code">
<input id="locality" placeholder="prefill locality">
<br>
<button type="button" disabled>Submit</button>

jQuery的：

$(document).on('click keyup change input blur', '#autocomplete', function() {
    if ($(this).val().length > 0){
      $('button').prop('disabled', true);
      if ($('#postal_code').val().length > 1 && $('#locality').val().length > 1) {
          $('button').prop('disabled', false);
      }
  } else {
      $('button').prop('disabled', false);
  }
});

// See fiddle for Google Maps API.

如何解决此问题？

Answer 1

如评论中所述，您应该使用回调。 place_changed事件始终是最后一个事件，所以你应该在那里做任何你需要的验证（我的答案中没有，你可以自己编写验证代码）并使用它来启用按钮。您只需要keyup即可确保在用户开始键入新地址时禁用该按钮。如果您添加onclick和blur，当用户点击输入并且不更改输入时，您将遇到问题。

$(document).on('keyup', '#autocomplete', function() {
   $('button').prop('disabled', false);
});

function formIsValid(){
    // you write this code
    return true;
}

function initialize() {
  autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocomplete"), {
    types: ["geocode"]
  }), google.maps.event.addListener(autocomplete, "place_changed", function() {
    fillInAddress()
    if(formIsValid()) $('button').prop('disabled', false);
  })
}

Answer 2

找到了一种方法，我使用google maps eventListener来调用我的函数。

Javascript：

function updateForm() {
    if ($('#postal_code').val().length > 1 && $('#locality').val().length > 1) {
        $('#submit-form').prop('disabled', false);
    } else {
        $('#submit-form').prop('disabled', true);
    }
}

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
    updateForm();
});

updateForm()将在fillInAddress()

之后调用

jQuery - 表单验证是一个迟到的事件

2 个答案: