在表单完成而不是提交时触发警报。
我要做什么：
因此，当您开始输入地址时，我正在使用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密钥将被销毁。
感谢您的帮助。
答案 0 :(得分：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>