Alert 'hi' after all Google input fields are filled in

Question

Trigger alert on form completion rather than submission.

What I'm trying to do:

So I'm using a Google API to show a list of addresses in a dropdown when you start typing an address.

Once all the inputs fields on the page are filled in I want to trigger: alert('hi')

Important info:

The Google API generates address like so:

  <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>

after the user starts typing an address so it gets generated after the DOM has loaded.

What I have done & the the problem I'm facing:

So far I've got a function that checks the inputs to see if they are empty but how do I get it to execute after all the input fields have been filled in?

Here is the codepen and the code is also below:

 <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>

For obvious reasons the API key will be destroyed after I found a fix.

Thanks for any help.

Answer 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>

Alert 'hi' after all Google input fields are filled in

Question

1 answers

solution1
1 ACCPTED 2019-01-19 21:30:12

Alert 'hi' after all Google input fields are filled in

Question

1 answers

solution1 1 ACCPTED 2019-01-19 21:30:12

solution1
1 ACCPTED 2019-01-19 21:30:12