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的异步特性，否则这是一个非常简单的问题。无论如何，我在这里解释

页面加载后找到class other 0 a 11 1 a 22 2 b 33 3 b 44 4 b 55 5 c 66 6 c 77 7 c 88 after groupby: classname: a classdf: class other 0 a 11 1 a 22 ===== classname: b classdf: class other 2 b 33 3 b 44 4 b 55 ===== classname: c classdf: class other 5 c 66 6 c 77 7 c 88 =====时会调用window.onload=PageLoad();函数，然后

PageLoad()

您可能会猜到，function PageLoad() { getLocation(); // <-- gets called document.frm1.submit(); // <-- doesn't wait for getLocation() to complete; // rather runs right away }在执行它的工作时（在“线程” A中）getLocation()被运行（在另一个“线程” B中）并提交了您期望什么。

因此，您需要做的是在document.frm1.submit();中移动与提交相关的代码，以便一旦浏览器获取位置然后提交表单。

showPosition()

Answer 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准备就绪

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

2 个答案: