Question

我使用以下代码查找浏览器位置并将其发布到下一页，但问题是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'];
?>

Answer 1

您可以默认禁用提交按钮，并在成功找到位置时删除disable属性。因此，您可以在找到位置之前阻止提交表单。但更好的方法是仅通过按钮触发计算并等待成功响应，而不是在需要时使用lan和lon值执行ajax请求，或者只是操纵dom以显示位置而无需重新加载。如果你的php脚本只是打印由javascript发送的变量，则不需要php脚本。只需使用javascript在html页面上打印变量值。

Answer 2

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，但你似乎没有多少使用它，你的函数名称和内联事件处理程序可以改进/删除。

Answer 3

根据您发布的代码和您的问题，我认为这里最简单的方法是等待DOM完成后，表单将不会提交，直到有人点击按钮onclick。我建议您将代码包装到document ready。

JavaScript检查值是否存在然后提交表单

3 个答案: