How to post a form without the form tag in Javascript?

Question

Statement

This code worked so far but I would like to make it run without using <form>...</form>

What should I need to change in the javascript part? Any method or suggestion?

• Using element.onclick() instead of using element.addEventListener() ?

Expectation

It will be able to run and get exactly the same result as before.

<div class="row justify-content-center">
  <div class="container">
    <h3>Please enter location name :</h3>
    <form id="locPost">
      <!--HERE-->

      <div class="form-group">
        <input size="50" type="text" id="getGPS" required>
      </div>
      <button style="font-size:18px;border:2px solid black" type="submit" name="Convert" class="btn btn-primary">Convert <i class="fas fa-location-arrow"></i></button>
      <button style="font-size:18px;border:2px solid black" onclick="location.reload();" class="btn btn-success">Refresh Page <i class="fas fa-sync"></i></button>
      <div class="form-group"></div>
      <div class="form-group">
        <label>Latitude</label>:&emsp;
        <input id="latte" style="font-size:1em" type="text" maxlength="10" step="any" name="lat" readonly>
      </div>
      <div class="form-group">
        <label>Longitude</label>:
        <input id="longer" style="font-size:1em" type="text" maxlength="10" step="any" name="lng" readonly>
      </div>
      <div class="row justify-content-center">
        <button style="font-size:18px;border:2px solid black" onclick="window.close()" class="btn btn-danger">Close Geoconverter <i class="fas fa-times"></i></button>
      </div>

    </form>
    <!--AND HERE-->
  </div>
</div>
<script>
  // Get location form
  var locationForm = document.getElementById('locPost');

  // Listen for submit
  locationForm.addEventListener('submit', geocode);

  function geocode(e) {
    // Prevent actual submit
    e.preventDefault();

    var location = document.getElementById('getGPS').value;

    axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
        params: {
          address: location,
          key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //Paste your Google API KEY HERE!
        }
      })
      .then(function(response) {
        // Get Lat-Long
        var latpos = response.data.results[0].geometry.location.lat;
        var lngpos = response.data.results[0].geometry.location.lng;
        document.getElementById('latte').value = latpos;
        document.getElementById('longer').value = lngpos;
      })
  }
</script>

Answer 1

Add an event listener on the button and call the geocode function on its click:

 <div class="row justify-content-center"> <div class="container"> <h3>Please enter location name :</h3> <form id="locPost"> <!--HERE--> <div class="form-group"> <input size="50" type="text" id="getGPS" required> </div> <button style="font-size:18px;border:2px solid black" type="submit" name="Convert" class="btn btn-primary" id="convert">Convert <i class="fas fa-location-arrow"></i></button> <button style="font-size:18px;border:2px solid black" onclick="location.reload();" class="btn btn-success">Refresh Page <i class="fas fa-sync"></i></button> <div class="form-group"></div> <div class="form-group"> <label>Latitude</label>:&emsp; <input id="latte" style="font-size:1em" type="text" maxlength="10" step="any" name="lat" readonly> </div> <div class="form-group"> <label>Longitude</label>: <input id="longer" style="font-size:1em" type="text" maxlength="10" step="any" name="lng" readonly> </div> <div class="row justify-content-center"> <button style="font-size:18px;border:2px solid black" onclick="window.close()" class="btn btn-danger">Close Geoconverter <i class="fas fa-times"></i></button> </div> </form> <!--AND HERE--> </div> </div> <script> // Get location form var button = document.getElementById('convert'); // Listen for submit button.addEventListener('click', geocode); function geocode(e) { // Prevent actual submit e.preventDefault(); var location = document.getElementById('getGPS').value; axios.get('https://maps.googleapis.com/maps/api/geocode/json', { params: { address: location, key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //Paste your Google API KEY HERE! } }) .then(function(response) { // Get Lat-Long var latpos = response.data.results[0].geometry.location.lat; var lngpos = response.data.results[0].geometry.location.lng; document.getElementById('latte').value = latpos; document.getElementById('longer').value = lngpos; }) } </script>