如何获取地理位置然后自动提交表单而无需单击按钮
Posted
技术标签:
【中文标题】如何获取地理位置然后自动提交表单而无需单击按钮【英文标题】：How to get geolocation then auto submit form without having to click a button 【发布时间】：2019-04-25 16:09:54 【问题描述】：我想调用一个页面来获取地理位置，然后自动将表单提交到我的 php 页面到 $_REQUEST getlat 和 getlon 而无需单击提交按钮。这就是我所拥有的。在我的浏览器检查器中，我看到了我的地理位置值，但它不会自动提交。我尝试在我的 body 标签中使用 onload 函数，但后来发现你一次只能调用一个函数，而且我读到这是一个不好的做法。我已经查看了另一个类似的问题，但无法将其拼凑在一起。感谢您的帮助
<html>
<script>
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(
showPosition,
positionError
);
function showPosition(position)
document.getElementById('getlat').value = position.coords.latitude;
document.getElementById('getlon').value = position.coords.longitude;
lon = document.getElementById('getlon').value;
lat = document.getElementById('getlat').value;
function positionError(error)
if (error.PERMISSION_DENIED) alert('Please accept geolocation');
hideLoadingDiv();
showError(
'Geolocation is not enabled. Please enable to use this feature'
);
</script>
<script>
function PageLoad()
getLocation();
document.frm1.submit();
</script>
<body>
<script>
window.onload = PageLoad();
</script>
<form action="results.php" name="frm1">
<input type="hidden" name="longitude" id="getlon" />
<input type="hidden" name="latitude" id="getlat" />
</form>
</body>
</html>
【问题讨论】：
【参考方案1】：您一定不知道 javascript 的异步特性，否则这是一个非常简单的问题。反正这里我解释一下
当页面加载并找到window.onload=PageLoad(); 时，它会调用PageLoad() 函数，然后
function PageLoad()
getLocation(); // <-- gets called
document.frm1.submit(); // <-- doesn't wait for getLocation() to complete;
// rather runs right away
您可以猜到，当getLocation() 正在执行它的工作时（在“线程”A 中）document.frm1.submit(); 会运行（在另一个“线程”B 中）并提交不是您期望的表单。
因此，您需要做的是将提交相关代码移动到showPosition() 中，以便浏览器获取位置后提交表单。
function showPosition(position)
document.getElementById("getlat").value = position.coords.latitude;
document.getElementById("getlon").value = position.coords.longitude;
lon=document.getElementById("getlon").value;
lat=document.getElementById("getlat").value;
document.frm1.submit(); <-- submits when browser gets the users location
【讨论】：
完美，感谢您的解释。仅供参考，起初它不起作用，然后我注意到我忘记在我的 【参考方案2】：根据mdn 文档
getCurrentPosition() 方法。这会发起一个异步请求 检测用户位置
您在获取坐标之前发送表单。解决方案是在异步请求结束时发送带有更新隐藏输入值的表单。请尝试以下示例
有这个 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<form action="results.php" name="frm1">
<input type="hidden" name="longitude" id="getlon" />
<input type="hidden" name="latitude" id="getlat" />
</form>
<script src="geo.js"></script>
</body>
</html>
JS
document.addEventListener('DOMContentLoaded', () =>
pageLoad();
);
function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition, positionError);
function showPosition(position)
console.log(position);
document.getElementById('getlat').value = position.coords.latitude;
document.getElementById('getlon').value = position.coords.longitude;
lon = document.getElementById('getlon').value;
lat = document.getElementById('getlat').value;
document.frm1.submit(); // here the form is submit
function positionError(error)
if (error.PERMISSION_DENIED) alert('Please accept geolocation');
hideLoadingDiv();
showError('Geolocation is not enabled. Please enable to use this feature');
function pageLoad()
getLocation();
当 DOM 准备好时，我会在这里使用
【讨论】：
以上是关于如何获取地理位置然后自动提交表单而无需单击按钮的主要内容，如果未能解决你的问题，请参考以下文章
有没有一种方法可以在单击按钮时验证表单的一部分，而无需先实际提交表单？