我使用以下代码来查找浏览器位置并将其发布到下一页,但问题是JavaScript查找浏览器位置的时间很短,表单在找到浏览器位置之前就已经发布了,我如何才能在找到浏览器位置后才提交表单?
newtest1.php
<html>
<head>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
document.getElementById("getlat").value = position.coords.latitude;
document.getElementById("getlon").value = position.coords.longitude;
}
getLocation();
</script>
</head>
<body>
<form id="myForm" method="post" action="newtest2.php">
<input type="text" id="getlat" name="getlat" />
<input type="text" id="getlon" name="getlon" />
<input type="button" name="myformer" onclick="myFunction();" />
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
myFunction();
</script>
</body>
</html>
newtest2.php
<?php
echo $_POST['getlat'];
echo $_POST['getlon'];
?>
您可以默认禁用提交按钮,并在成功找到位置的情况下删除disable属性。因此,您可以防止在找到职位之前提交表格。但更好的方法是只需按下按钮即可触发计算并等待成功响应,而不是在需要时使用lan和lon值执行ajax请求,或者只需操纵dom来显示位置而不进行任何重新加载。如果您的php脚本只是打印由javascript发送的变量,则不需要php脚本。只需使用javascript在html页面上打印变量值。
geolocation.getCurrentPosition
是异步的,所以如果你想等待事情完成时发生,你应该把这些事情放在回调函数中——在你的情况下是showPosition()
。
你必须稍微重写一下你所拥有的,你不应该自动调用你的提交函数,我想你只需要在表单提交时使用它:
function myFunction() {
document.getElementById("myForm").submit();
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
document.getElementById("getlat").value = position.coords.latitude;
document.getElementById("getlon").value = position.coords.longitude;
// now submit the form as the position has been determined
myFunction();
}
$('#myForm').on('submit', function(e) {
e.preventDefault();
getLocation();
});
你可能可以稍微清理一下,你标记了你的问题jQuery,但你似乎不怎么使用它,你的函数名和内联事件处理程序可以改进/删除。
根据您发布的代码和您的问题,我认为这里最简单的方法是等待DOM准备好,毕竟由于onclick
的原因,只有有人点击按钮才能提交表单。我建议您将代码封装到document ready
中。