填写完所有 Google 输入字段后提示“嗨”答案

【问题标题】：Alert 'hi' after all Google input fields are filled in填写完所有 Google 输入字段后提示“嗨”
【发布时间】：2019-01-19 20:35:54
【问题描述】：

在表单完成而不是提交时触发警报。

我想要做什么：

所以当您开始输入地址时，我正在使用 Google API 在下拉列表中显示地址列表。

填写完页面上的所有输入字段后，我想触发：alert('hi')

重要信息：

Google API 生成地址如下：

  <div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">S</span>ão Paulo</span><span>State of São Paulo, Brazil</span></div>
  <div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">S</span>an Francisco</span><span>CA, USA</span></div>
  <div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">S</span>ão Paulo</span><span>State of São Paulo, Brazil</span></div>
  <div class="pac-item"><span class="pac-icon pac-icon-marker"></span><span class="pac-item-query"><span class="pac-matched">S</span>an Francisco</span><span>CA, USA</span></div>

在用户开始输入地址之后，它会在 DOM 加载后生成。

我做了什么&我面临的问题：

到目前为止，我有一个函数可以检查输入以查看它们是否为空，但是在填写完所有输入字段后如何让它执行？

这是codepen，代码也在下面：

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
      integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
      integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
      crossorigin="anonymous"
    ></script>

    <title>Document</title>
  </head>

  <body>
    <form id="distance_form">
      <div class="form-group">
        <label>Starting Point: </label>
        <input
          class="form-control"
          id="from_places"
          placeholder="Enter a location"
        />
      </div>

      <div class="form-group">
        <label>Middle Way: </label>
        <input
          class="form-control"
          id="middle_places"
          placeholder="Enter a location"
        />
      </div>

      <div class="form-group">
        <label>Destination: </label>
        <input
          class="form-control"
          id="to_places"
          placeholder="Enter a location"
        />
      </div>
    </form>

    <script>
      $(function() {
        // add input listeners
        google.maps.event.addDomListener(window, "load", function() {
          var from_places = new google.maps.places.Autocomplete(
            document.getElementById("from_places")
          );
          var middle_places = new google.maps.places.Autocomplete(
            document.getElementById("middle_places")
          );
          var to_places = new google.maps.places.Autocomplete(
            document.getElementById("to_places")
          );
        });
      });



      function checkInputs() {
        var flag = 0;
        var result = new Array();

        $("form#inputData :input[type=text]").each(function() {
          var input = $(this);
          if (input.val() > 0 && input.val() !== "") {
            result.push(input.val());
          }
        });

        if (result.length > 0) {
          alert("Hello World");
        } 
        
      }
    </script>

    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuza67QeCTz8WQg9BJYGgMyiz0f8IT2M&libraries=places&language=en"
    ></script>
  </body>
</html>

由于显而易见的原因，API 密钥将在我找到修复程序后被销毁。

感谢您的帮助。

【问题讨论】：

用onfocusout()怎么样？w3schools.com/jsref/event_onfocusout.asp
它可以工作我现在测试一下
有效！（有点）我可以 console.log 嗨，但我认为我的 checkInputs 有点混乱

标签： javascript jquery html google-api

【解决方案1】：

$(function() {
  // Add input listeners.
  google.maps.event.addDomListener(window, 'load', function() {
    var from_places = new google.maps.places.Autocomplete(
      document.getElementById('from_places')
    );
    var middle_places = new google.maps.places.Autocomplete(
      document.getElementById('middle_places')
    );
    var to_places = new google.maps.places.Autocomplete(
      document.getElementById('to_places')
    );
  });
});

// Get all input fields.
var inputs = document.querySelectorAll('.form-control');

function checkInputs() {
  var allFilled = true;

  // If any of the inputs is not filled, we won't show the alert.
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value === '') {
      allFilled = false;
    }
  }

  // If all input fields have been filled.
  if (allFilled) {
    alert('hi');
  }
}

// Check all inputs after losing focus on any input.
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('focusout', checkInputs);
}

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous" />

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

  <title>Document</title>
</head>

<body>
  <form id="distance_form">
    <div class="form-group">
      <label>Starting Point: </label>
      <input class="form-control" id="from_places" placeholder="Enter a location" />
    </div>

    <div class="form-group">
      <label>Middle Way: </label>
      <input class="form-control" id="middle_places" placeholder="Enter a location" />
    </div>

    <div class="form-group">
      <label>Destination: </label>
      <input class="form-control" id="to_places" placeholder="Enter a location" />
    </div>
  </form>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuza67QeCTz8WQg9BJYGgMyiz0f8IT2M&libraries=places&language=en"></script>
</body>

</html>

【讨论】：

谢谢！我一直在为这个问题头疼太久了。