如何獲取地理位置然后自動提交表單而無需單擊按鈕

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()正在做它的工作（在某種“線程”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
}

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 個解決方案

解決方案1
2 已采納 2019-04-25 16:29:20

解決方案2
0 2019-04-25 17:05:46

如何獲取地理位置然后自動提交表單而無需單擊按鈕

問題描述

2 個解決方案

解決方案1 2 已采納 2019-04-25 16:29:20

解決方案2 0 2019-04-25 17:05:46

解決方案1
2 已采納 2019-04-25 16:29:20

解決方案2
0 2019-04-25 17:05:46