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

Question

我想调用一个页面来获取地理定位，然后自动将表单提交到我的 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>

Answer 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() 正在做它的工作时（在某种 "thread" A 中）document.frm1.submit(); 得到运行（在另一种 "thread" 中） 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
}

Answer 2

根据 mdn 文档

getCurrentPosition() method. This initiates an asynchronous request to detect the user's position

您在获取坐标前发送表格。解决方案是在异步请求结束时发送此表单以及更新后的隐藏输入的值。请尝试以下示例

有了这个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准备好后使用

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

How to get geolocation then auto submit form without having to click a button

html

javascript

php

geolocation