如何在Javascript中发布没有表单标签的表单?

时间:2019-04-29 08:27:03

标签: javascript html

声明

到目前为止,此代码有效,但是我想使其在不使用<form>...</form>的情况下运行

我需要在javascript部分中进行哪些更改? 有什么方法或建议吗?

  • 使用element.onclick()而不是使用element.addEventListener()吗?

期望

它将能够运行并获得与以前完全相同的结果。

<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 个答案:

答案 0 :(得分:1)

在按钮上添加事件监听器,并在其点击时调用地址解析功能:

select * from def
left join 
event on def.id=event.deviceid