如何获取地理位置然后自动提交表单而无需单击按钮答案

【问题标题】：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>

【问题讨论】：

标签： javascript php html geolocation

【解决方案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
}

【讨论】：

完美，感谢您的解释。仅供参考，起初它不起作用，然后我注意到我忘记在我的
标记中添加 method="post" 。一旦我这样做了，它就起作用了。

【解决方案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>

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 准备好时，我会在这里使用

【讨论】：