title: How to prevent form submission until onsubmit function completes?
body: <p>For my <code>onsubmit</code> function, I have a function that requests for user's location and adds their location to the input values of my form.
  However, when the user clicks on the submit button and a pop-up appears and asks the user to allow the browser to know their location, my form always submits before the user could answer the pop-up. This leaves the function incompleted and the input values become undefined.</p>
  
  <p>I have tried adding a "return true;" statement until my <code>onsubmit</code> function ends, but the form still gets submitted prior. I have also tried adding  "e.preventDefault();" before my function completes. None of the methods worked so far...</p>
  
  <p>My form:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form action="/login" onsubmit="getLocation()" method="POST"&gt;
      &lt;button type="submit" class="btn btn-dark"&gt;Login&lt;/button&gt;
      &lt;input id="currentUserLattitude" type=hidden name="currentLocation" value="placeholder"&gt;
      &lt;input id="currentUserLongitude" type=hidden name="currentLocation" value="placeholder"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The onsubmit function:  </p>
  
  <pre><code>function getLocation(e) {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
          return true;
      } else {
          alert("Geolocation is not supported by this browser.");
      }
  }
  
  function onGeoSuccess(position) {
      document.getElementById("currentUserLattitude").value = position.coords.latitude;
      document.getElementById("currentUserLongitude").value = position.coords.longitude;
  }
  
  function onGeoError(err) {
      alert("Error code " + err.code + ". " + err.message);
  }
  </code></pre>