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>

1 Answers

1
K K On Best Solutions

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>