如何修改JavaScript代码，移除<form>标签后实现原有表单提交功能？

现有代码目前可正常运行，但我希望移除<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>

嗨，我来帮你梳理一下需要修改的地方，确保移除form标签后功能完全和之前一致：

一、核心修改点 #

原来的代码依赖form的submit事件触发地理编码逻辑，移除form后，我们需要把触发逻辑转移到Convert按钮上，具体步骤如下：

1. 移除form标签：直接删掉<form id="locPost">和对应的闭合标签，保留里面的所有内容。
2. 调整Convert按钮的属性：
   • 把按钮的type="submit"改成type="button"（因为没有form了，submit类型不再有意义）
   • 给按钮加一个唯一id，比如id="convertBtn"，方便在JS中获取元素
3. 修改JavaScript的事件绑定逻辑：
   • 删掉原来获取form元素的代码var locationForm = document.getElementById('locPost');
   • 换成获取Convert按钮的代码var convertBtn = document.getElementById('convertBtn');
   • 把监听submit事件改成监听按钮的click事件
   • 移除e.preventDefault()（因为没有表单提交的默认行为需要阻止了）

二、关于onclick vs addEventListener的选择 #

完全可以用element.onclick()替代addEventListener()，两者在这个场景下效果一致，但有几个小区别你可以参考：

• addEventListener允许给同一个元素绑定多个同类型事件（比如多个click事件），不会互相覆盖；而onclick后面的赋值会直接覆盖之前的绑定
• addEventListener支持通过第三个参数控制事件捕获/冒泡阶段，onclick只能使用冒泡阶段
• 如果你的这个按钮不会有其他额外的点击事件绑定，用onclick完全没问题，代码更简洁

三、修改后的完整代码 #

这里提供两种实现方式，你可以任选一种：

方式1：使用addEventListener（推荐，扩展性更好） #

<div class="row justify-content-center">
 <div class="container">
 <h3>Please enter location name :</h3>
 <div class="form-group">
 <input size="50" type="text" id="getGPS" required>
 </div>
 <button style="font-size:18px;border:2px solid black" type="button" id="convertBtn" 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>
 </div>
 </div>
 <script>
 // Get convert button
 var convertBtn = document.getElementById('convertBtn');
 // Listen for click
 convertBtn.addEventListener('click', geocode);
 function geocode() {
 var location = document.getElementById('getGPS').value;
 // 手动触发input的必填验证，和原form的效果一致
 if (!document.getElementById('getGPS').checkValidity()) {
 document.getElementById('getGPS').reportValidity();
 return;
 }
 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>

方式2：使用onclick（代码更简洁） #

只需要把JS部分改成下面这样即可（HTML部分和方式1完全一致）：

function geocode() {
 var location = document.getElementById('getGPS').value;
 // 手动触发必填验证
 if (!document.getElementById('getGPS').checkValidity()) {
 document.getElementById('getGPS').reportValidity();
 return;
 }
 axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
 params: {
 address: location,
 key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //Paste your Google API KEY HERE!
 }
 })
 .then(function(response) {
 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;
 })
}
// 绑定onclick事件
document.getElementById('convertBtn').onclick = geocode;

补充说明：原来的input有required属性，form存在时点击submit会自动触发验证，移除form后需要手动调用checkValidity()和reportValidity()来保持必填项验证的效果，这部分我已经加到代码里了，确保和原功能完全一致。

内容的提问来源于stack exchange，提问作者O San